webfont在vue中的使用

Posted 2021-02-01 zhujiujianghuxing

1 下载一个喜欢的字体 tff

http://www.font5.com.cn/tag.php?tag=ttf%B8%F1%CA%BD

2 使用webfont在线生成 

https://www.fontke.com/tool/fontface/

3 项目创建 font.css

@font-face{font-family:‘haha‘; /* 瞎取个名字 */
src: url(‘char.eot‘); /* IE9 */
src: url(‘char.eot‘) format("embedded-opentype"), /* IE6-IE8 */
url(‘char.woff2‘) format("woff"), /* chrome、firefox */
url(‘char.ttf‘) format("truetype"); /* chrome、firefox、opera、Safari, android, ios 4.2+ */
font-style: normal; font-weight: normal;}

4 vue使用

4.1 引入

import FontStyles from ‘../font/font.css‘

4.2 写样式 font-family

<h2 style="font-family: haha;">super junior example</h2>