vue中引入第三方字體文件的方法示例
更新時間：2018年12月17日 14:56:01 作者：ZJW0215
這篇文章主要介紹了vue中引入第三方字體文件的方法示例，文中講述了實現(xiàn)方法及其錯誤的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在用vue來寫一官網(wǎng)的時候，想引入外部字體文件，畢竟總感覺他自己的字體有點難看，在這里記錄下
1.先下載字體文件所需的.ttf文件
我這里想引入的是華文行楷字體
百度后下載了一個3M多的ttf文件
或者http://www.dbjr.com.cn/fonts/點擊此鏈接，進行字體下載
2.將字體文件引入
自己定義一個文件夾，放入下載好的.ttf文件
先自己定義一個font.css文件，將下載好的字體文件的路徑引入
@font-face {
font-family: "華文行楷";
src: url('stxingka.ttf');
font-weight: normal;
font-style: normal;
}
在App.vue中的style里引入
<style lang="less" rel="stylesheet/less"> @import "./common/font/font.css"; </style>
在webpack的配置文件里要加上解析.ttf文件的規(guī)則
module: {
rules: [
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
使用的話，就按照原本的字體名稱，如我下的是華文行楷，就直接用華文行楷就可以了
在用vue + webpack進行開發(fā)的時候，在引用字體圖標遇到字體無法加載的問題：
報以下錯誤
搞了好久沒搞定，最后才找到解決方法（還是沒有找到原因）
修改字體圖標的css中引入字體文件的路徑
以前的---->>修改后：
最后改成絕對路徑就好了，但是原因還沒搞懂
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實戰(zhàn)之vue登錄驗證的實現(xiàn)代碼
本篇文章主要介紹了Vue實戰(zhàn)之vue登錄的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Vue.set()和this.$set()使用和區(qū)別
我們發(fā)現(xiàn)Vue.set()和this.$set()這兩個api的實現(xiàn)原理基本一模一樣，那么Vue.set()和this.$set()的區(qū)別是什么，本文詳細的介紹一下，感興趣的可以了解一下2021-06-06
解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題
這篇文章主要介紹了解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue使用lottie-web實現(xiàn)web動畫效果
在web端,lottie-web庫可以解析導(dǎo)出的動畫json文件,并將其以svg或者canvas的方式將動畫繪制在我們的頁面上,這篇文章主要介紹了vue使用lottie-web實現(xiàn)web動畫,需要的朋友可以參考下2024-06-06
本文主要介紹了el-table表格排序(多列排序和遠程排序)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了vue路徑寫法之關(guān)于./和@/的區(qū)別，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了Element使用el-table組件二次封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
vue3正式版已經(jīng)發(fā)布大半年了,咱也得緊跟時代潮流,vue3帶來的很多改變,下面這篇文章主要給大家介紹了關(guān)于利用Vue3實現(xiàn)拖拽定制化首頁功能的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了VUEX-action可以修改state嗎，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)鼠標經(jīng)過動畫的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10