vue中引入第三方字體文件的方法示例
更新時間：2018年12月17日 14:56:01 作者：ZJW0215
這篇文章主要介紹了vue中引入第三方字體文件的方法示例，文中講述了實現(xiàn)方法及其錯誤的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在用vue來寫一官網(wǎng)的時候，想引入外部字體文件，畢竟總感覺他自己的字體有點難看，在這里記錄下
1.先下載字體文件所需的.ttf文件
我這里想引入的是華文行楷字體
百度后下載了一個3M多的ttf文件
或者http://www.dhdzp.com/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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue.js學習筆記之修飾符，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue源碼入口文件分析(推薦)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue項目通過vue-i18n實現(xiàn)國際化方案(推薦)
這篇文章主要介紹了Vue項目通過vue-i18n實現(xiàn)國際化方案,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue Draggable實現(xiàn)拖動改變順序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細介紹了vue如何使用原生高德地圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要為大家詳細介紹了vue組件封裝實現(xiàn)抽獎隨機數(shù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
v-model 是 vue.js 提供的語法糖，根據(jù)不同的表單控件監(jiān)聽不同的事件，實現(xiàn)對表單控件的數(shù)據(jù)雙向綁定。這篇文章主要介紹了vue 表單輸入格式化中文輸入法異常,需要的朋友可以參考下2018-05-05
vue使用vant中的checkbox實現(xiàn)全選功能
這篇文章主要為大家詳細介紹了vue使用vant中的checkbox實現(xiàn)全選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
Vue的export?default和帶返回值的data()及@符號的用法說明
這篇文章主要介紹了Vue的export?default和帶返回值的data()及@符號的用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細介紹了如何利用vue實現(xiàn)拍照或錄像的功能,文中的示例代碼講解詳細,具有一定的參考價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-11-11