vue中引入第三方字體文件的方法示例
在用vue來(lái)寫(xiě)一官網(wǎng)的時(shí)候，想引入外部字體文件，畢竟總感覺(jué)他自己的字體有點(diǎn)難看，在這里記錄下
1.先下載字體文件所需的.ttf文件
我這里想引入的是華文行楷字體
百度后下載了一個(gè)3M多的ttf文件
或者http://chabaoo.cn/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實(shí)戰(zhàn)之vue登錄驗(yàn)證的實(shí)現(xiàn)代碼
本篇文章主要介紹了Vue實(shí)戰(zhàn)之vue登錄的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
Vue.set()和this.$set()使用和區(qū)別
我們發(fā)現(xiàn)Vue.set()和this.$set()這兩個(gè)api的實(shí)現(xiàn)原理基本一模一樣，那么Vue.set()和this.$set()的區(qū)別是什么，本文詳細(xì)的介紹一下，感興趣的可以了解一下2021-06-06
解決vue使用vant下拉框van-dropdown-item 綁定title值不變問(wèn)題
這篇文章主要介紹了解決vue使用vant下拉框van-dropdown-item 綁定title值不變問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue使用lottie-web實(shí)現(xiàn)web動(dòng)畫(huà)效果
在web端,lottie-web庫(kù)可以解析導(dǎo)出的動(dòng)畫(huà)json文件,并將其以svg或者canvas的方式將動(dòng)畫(huà)繪制在我們的頁(yè)面上,這篇文章主要介紹了vue使用lottie-web實(shí)現(xiàn)web動(dòng)畫(huà),需要的朋友可以參考下2024-06-06
本文主要介紹了el-table表格排序(多列排序和遠(yuǎn)程排序)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue路徑寫(xiě)法之關(guān)于./和@/的區(qū)別
這篇文章主要介紹了vue路徑寫(xiě)法之關(guān)于./和@/的區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了Element使用el-table組件二次封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
利用Vue3實(shí)現(xiàn)拖拽定制化首頁(yè)功能
vue3正式版已經(jīng)發(fā)布大半年了,咱也得緊跟時(shí)代潮流,vue3帶來(lái)的很多改變,下面這篇文章主要給大家介紹了關(guān)于利用Vue3實(shí)現(xiàn)拖拽定制化首頁(yè)功能的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了VUEX-action可以修改state嗎，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)動(dòng)畫(huà)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10