font-face用法

qq_27449993

于 2019-03-18 14:20:21 发布

阅读量7.3k

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_27449993/article/details/88638051

版权

前端专栏收录该内容

114 篇文章

订阅专栏

下载的字体只有.ttf格式文件，而@font-face属性通常需引入.eot +.ttf /.otf + svg + woff 才能让所有浏览器完美支持。因此，需要把.ttf文件转换成其他格式文件，可在https://www.fontsquirrel.com 进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@font-face {
    font-family: 'MyWebFont';
    src: url('../font/webfont.woff') format('woff'),
    url('../font/webfont.ttf') format('truetype');
}
@font-face {
    font-family: 'UnidreamLED';
    src: url("../font/UnidreamLED.ttf") format('truetype'),
    url('../font/UnidreamLED.woff') format('woff');
}