vue項目中添加字體文件.ttf字體文件

1.將下載好的字體文件添加到項目src/assets/fonts目錄下（通常是.ttf或.otf格式）

微信截圖_20240409144902.png

2.在Vue項目的樣式文件中通過@font-face規(guī)則引入字體。

@font-face {
  font-family: 'MyCustomFont';
  src: url('./assets/fonts/MyCustomFont.ttf') format('truetype'); /* 修改為相對應(yīng)的字體文件路徑 */
  font-weight: normal;
  font-style: normal;
}

3. 使用新字體

body {
  font-family: 'MyCustomFont', sans-serif;
}

推薦閱讀更多精彩內(nèi)容

• 如何在Vue或React項目中使用自定義字體,以及字體打包

  一. 如何在Vue或React項目中使用自定義字體 在開發(fā)前端項目時，經(jīng)常會遇到UI同事希望在項目中使用一個炫酷字...

  年輕人多學點閱讀 5,827評論 5贊 1
• 在網(wǎng)頁中插入特殊字體,淺談@font-face

  摘要：本篇文章包括（1）介紹@font-face（2）如何在網(wǎng)頁中使用@font-face插入特殊字體（3）中文在...

  Masukio閱讀 16,524評論 0贊 17
• H5 Laya 字體

  一、概念 參考網(wǎng)頁字體Serif和Sans-serif的區(qū)別及瀏覽器字體的設(shè)置CSS Font知識整理總結(jié) 1.F...

  合肥黑閱讀 6,362評論 0贊 12
• 在vue項目中添加特殊字體

  我們做項目的時候，有時候會想用一些特殊字體來美化我們的頁面，下面就教大家如何在vue中引用其他字體 首先要去百度搜...

  alokka閱讀 882評論 0贊 0
• handsome主題改變字體教程

  演示站點：yzyee.cn 1.選擇字體（推薦「漢儀文黑-75W」畢竟原里原氣的 :face_with_raise...

  夜盞NightLamp閱讀 195評論 1贊 1