css引入外部特殊字體,出現不起作用的原因


根據項目需求,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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM