Vue 引入字体文件YouSheBiaoTiHei
步骤:
1.以 YouSheBiaoTiHei 字体为例2.下载字体地址:https://font.chinaz.com/22110758525.htm (直接下载) / http://www.downcc.com/font/518114.html
或者 问 UI设计师要
更改名称:优设标题.ttf ----> YousheBiaoTiHei.ttf
2.1 一般需要生成多种字体(woff2、eot、woff、ttf、svg),
生成其他字体: https://transfonter.org/3. 字体文件下载成功,后放到项目文件中(一般 assets/css)
例如:
3.1 将下载 woff2、eot、woff、ttf、svg 放在 src/assets/css/YouSheBiaoTiHei.ttf
3.2 在同级中建立css文件,src/assets/css/YouSheBiaoTiHei.css4. 在css中编写@font-face {font-family: 'YouSheBiaoTiHei';font-weight: normal;font-style: normal;src: local('YouSheBiaoTiHei'),url('./YouSheBiaoTiHei.woff2') format('woff2'),url('./YouSheBiaoTiHei.eot?#iefix') format('embedded-opentype'),url('./YouSheBiaoTiHei.woff') format('woff'),url('./YouSheBiaoTiHei.ttf') format('truetype'),url('./YouSheBiaoTiHei.svg#YouSheBiaoTiHei') format('svg');font-display: swap; /* 优化字体加载性能 */}5. 在main.js中引入(注意:不要使用 @引入)
import '../src/assets/css/YouSheBiaoTiHei.css';6. 在自己页面中用
.family{font-family: YouSheBiaoTiHei;}