vue中引入字體文件

rose 發布于2019-08-23 14:06 / 1403人閱讀

摘要：在用來寫一官網的時候，想引入外部字體文件，畢竟總感覺他自己的字體有點難看，在這里記錄下先下載字體文件所需的文件我這里想引入的是華文行楷字體百度后下載了一個多的文件將字體文件引入自己定義一個文件夾，放入下載好的文件先自己定義一個文件，將下載好

在用vue來寫一官網的時候，想引入外部字體文件，畢竟總感覺他自己的字體有點難看，在這里記錄下

1.先下載字體文件所需的.ttf文件

我這里想引入的是華文行楷字體

百度后下載了一個3M多的ttf文件

2.將字體文件引入

自己定義一個文件夾，放入下載好的.ttf文件

先自己定義一個font.css文件，將下載好的字體文件的路徑引入

@font-face {
  font-family: "華文行楷";
  src: url("stxingka.ttf");
  font-weight: normal;
  font-style: normal;
}

在App.vue中的style里引入

在webpack的配置文件里要加上解析.ttf文件的規則

module: {
    rules: [
        {
            test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
            loader: "url-loader",
            options: {
                limit: 10000,
                name: utils.assetsPath("fonts/[name].[hash:7].[ext]")
            }
        }
    ]
}

使用的話，就按照原本的字體名稱，如我下的是華文行楷，就直接用華文行楷就可以了

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

往期好文推薦：

判斷iOS和Android及PC端

純css實現瀑布流（multi-column多列及flex布局）

實現單行及多行文字超出后加省略號

微信小程序之購物車和父子組件傳值及calc的注意事項

云服務器 GPU云服務器 php中引入文件. cdn引入vue 中引入的 java中引入異常

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100092.html

一個高仿追書神器的vue閱讀器。已成功做成app

摘要：原創，基本上是界面，新加了七八個功能，解決了前輩閱讀器上的絕大部分，并成功添加路徑打包成。畢竟只是一個學習項目跨域問題本次開發使用的是代理追書神器，是不需要后臺認證直接可以跨域的接口，以實現在移動端顯示的效果。應屆畢業生，目前正在找工作，簡歷需要所以開發了這個app。剛開始開發也是一臉懵逼，因為沒得后臺，一些邏輯功能也不知道怎么拓展。好在看到了追書神器api接口，頓時讓我決心做出這一...

miracledan 2019-08-22 18:18 評論0 收藏0
vue 項目總結一組件開發的配置和例子

摘要：入口文件，影響全局，作用是引入全局使用的庫公共的樣式和方法設置路由等。項目里總會有一些復用的組件，例如彈出框發送手機驗證碼圖片上傳等，將它們作為通用組件，避免重復工作結構如下可以根據功能模塊建立文件夾，放置本功能會用到的通用組件。上一篇文章 https://segmentfault.com/a/11... 介紹了項目里文件夾的分類和作用，這次主要說明 src 文件夾里具體的文件分類和...

melody_lql 2019-08-02 16:00 評論0 收藏0
vue 項目總結一組件開發的配置和例子

摘要：入口文件，影響全局，作用是引入全局使用的庫公共的樣式和方法設置路由等。項目里總會有一些復用的組件，例如彈出框發送手機驗證碼圖片上傳等，將它們作為通用組件，避免重復工作結構如下可以根據功能模塊建立文件夾，放置本功能會用到的通用組件。上一篇文章 https://segmentfault.com/a/11... 介紹了項目里文件夾的分類和作用，這次主要說明 src 文件夾里具體的文件分類和...

isaced 2019-08-22 11:16 評論0 收藏0
使用vue完成微信公眾號網頁小記

摘要：前言公司最近有一個頁面的功能，比較簡單的一個調查表功能，嵌套在我們微信公眾號里面。同時用到了微信的登錄和分享接口。參考鏈接使用微信接口前端部分我們用微信接口主要是做的登錄和分享功能，首先是上微信公眾平臺上邊看看，把權限搞好之后后端配置。 showImg(https://segmentfault.com/img/bVbrOkH); 前言：公司最近有一個H5頁面的功能，比較簡單的一個調查...

phoenixsky 2019-08-02 16:14 評論0 收藏0