vue中引入第三方字體文件的方法示例
在用vue來(lái)寫(xiě)一官網(wǎng)的時(shí)候，想引入外部字體文件，畢竟總感覺(jué)他自己的字體有點(diǎn)難看，在這里記錄下
1.先下載字體文件所需的.ttf文件
我這里想引入的是華文行楷字體
百度后下載了一個(gè)3M多的ttf文件
或者http://www.fzitv.net/fonts/點(diǎn)擊此鏈接，進(jìn)行字體下載
2.將字體文件引入
自己定義一個(gè)文件夾，放入下載好的.ttf文件
先自己定義一個(gè)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進(jìn)行開(kāi)發(fā)的時(shí)候，在引用字體圖標(biāo)遇到字體無(wú)法加載的問(wèn)題：
報(bào)以下錯(cuò)誤
搞了好久沒(méi)搞定，最后才找到解決方法（還是沒(méi)有找到原因）
修改字體圖標(biāo)的css中引入字體文件的路徑
以前的---->>修改后：
最后改成絕對(duì)路徑就好了，但是原因還沒(méi)搞懂
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue.js學(xué)習(xí)筆記之修飾符，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要介紹了vue源碼入口文件分析(推薦)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
Vue項(xiàng)目通過(guò)vue-i18n實(shí)現(xiàn)國(guó)際化方案(推薦)
這篇文章主要介紹了Vue項(xiàng)目通過(guò)vue-i18n實(shí)現(xiàn)國(guó)際化方案,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
vue Draggable實(shí)現(xiàn)拖動(dòng)改變順序
這篇文章主要為大家詳細(xì)介紹了vue Draggable實(shí)現(xiàn)拖動(dòng)改變順序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue如何使用原生高德地圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
vue組件封裝實(shí)現(xiàn)抽獎(jiǎng)隨機(jī)數(shù)
這篇文章主要為大家詳細(xì)介紹了vue組件封裝實(shí)現(xiàn)抽獎(jiǎng)隨機(jī)數(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
v-model 是 vue.js 提供的語(yǔ)法糖，根據(jù)不同的表單控件監(jiān)聽(tīng)不同的事件，實(shí)現(xiàn)對(duì)表單控件的數(shù)據(jù)雙向綁定。這篇文章主要介紹了vue 表單輸入格式化中文輸入法異常,需要的朋友可以參考下2018-05-05
vue使用vant中的checkbox實(shí)現(xiàn)全選功能
這篇文章主要為大家詳細(xì)介紹了vue使用vant中的checkbox實(shí)現(xiàn)全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
Vue的export?default和帶返回值的data()及@符號(hào)的用法說(shuō)明
這篇文章主要介紹了Vue的export?default和帶返回值的data()及@符號(hào)的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)拍照或錄像的功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11