根據項目需求,UI設計特殊字體,前端根據UI給的特殊字體,引入到自己的項目中,但是出現了引入不生效的情況,網上搜索也沒有找到原因,左思右想發現問題,我們在引入的時候需要注意以下幾點,這是我出現的問題
1.引入幾個就需要用幾個@font-face 如下:
@font-face {
font-family: 'HYChangLiSongKeBen';
src: url("../font/my-font.ttf") format('truetype');
font-weight: normal;
opacity: 1;
}
@font-face {
font-family: "Source Han Serif CN bold";
src:url("../font/SourceHanSerifCN-Bold.ttf") format('truetype');
url("../font/sourcehanserifcn-bold-webfont.woff") format('woff');
url("../font/sourcehanserifcn-bold-webfont.svg") format('svg');
}
2.引入的路徑需要正確
3.引入的后綴名為.ttf的字體的format()不是ttf,而是 truetype
@font-face {
font-family: 'HYChangLiSongKeBen';
src: url("../font/my-font.ttf") format('truetype');
font-weight: normal;
opacity: 1;
}
.content-article .content-txt {
font-size: 0.32rem;
font-family: HYChangLiSongKeBen;
font-weight: normal;
font-style: normal;
}
注釋:
獲取要使用字體的三種文件格式,確保能在主流瀏覽器中都能正常顯示該字體。
.TTF或.OTF,適用於Firefox 3.5、Safari、Opera
.EOT,適用於Internet Explorer 4.0+
.SVG,適用於Chrome、IPhone