font-face用法

font-face用法_第1张图片

@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');
}
conHead{
    font-family: 'MyWebFont';}

下载的字体打开一看,只有.ttf格式的字体文件,但是在@font-face属性里,一般要引入.eot + .ttf /.otf + svg + woff 才能达到让所有浏览器的完美支持。

那么我们就需要把.ttf文件转换成字体的其他格式文件,可以在https://www.fontsquirrel.com里来操作
font-face用法_第2张图片

你可能感兴趣的:(前端)