龙空技术网

「Vue」导入字体并使用font-spider压缩

youyanping 187

前言:

如今朋友们对“css引入字体”大致比较注重,朋友们都需要学习一些“css引入字体”的相关文章。那么小编在网络上汇集了一些有关“css引入字体””的相关资讯,希望你们能喜欢,各位老铁们快快来学习一下吧!

一、网上下载'ttf'字体

二、在项目中使用

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      @font-face {        font-family: 'homeFont';        src: url('./siyuan.ttf');        font-weight: normal;        font-style: normal;      }      p {        font-family: 'homeFont';      }    </style>  </head>  <body>    <p>好</p>  </body></html>

三、下载压缩字体依赖

npm install font-spider -g# 查看版本号font-spider -V

四、如果是vue中字体需要压缩,需要自己在外新建一个文件夹来存放压缩字体。

打开终端,输入命令

font-spider index.html

五、复制.font-splider中字体到vue项目进行替换

标签: #css引入字体