html引用ttf字体文件

爱被打了一巴掌 2022-12-20 02:09 268阅读 0赞

在样式表如此定义：
    
    @font-face {
        font-family: MyFontName;//自定义字体名称
        src: url(../fonts/zenicon.ttf)
    }
    
    然后，具体使用：
    
    <div style="font-family:MyFontName;">Test Text</div>

引入苹方字体

//可以写多个引入多个字体文件
    
    @font-face {
        font-family: PingFang-SC-Semibold;
        src: url("../fonts/PingFang-SC-Semibold.ttf");
    }
     
    @font-face {
        font-family: PingFangSC-Regular ;
        src: url("../fonts/PingFang_Regular.ttf");
    }
    *{
        font-family: PingFangSC-Medium, sans-serif;
    }

下载字体文件

[http://pan.baidu.com/s/1b1cRP8][http_pan.baidu.com_s_1b1cRP8]

提取密码：6r5s

CSS font-family 中的苹方字体  
苹方提供了六个字重，font-family 定义如下：  
苹方-简 常规体  
font-family: PingFangSC-Regular, sans-serif;  
苹方-简 极细体  
font-family: PingFangSC-Ultralight, sans-serif;  
苹方-简 细体  
font-family: PingFangSC-Light, sans-serif;  
苹方-简 纤细体  
font-family: PingFangSC-Thin, sans-serif;  
苹方-简 中黑体  
font-family: PingFangSC-Medium, sans-serif;  
苹方-简 中粗体  
font-family: PingFangSC-Semibold, sans-serif;

苹方除了简体的：苹方-简（PingFang SC），还为繁体用户提供有：苹方-繁（PingFang TC） ，苹方-港（PingFang HK）

苹方-繁 的 CSS font-family 使用：  
font-family: PingFangTC-Regular, sans-serif;  
font-family: PingFangTC-Ultralight, sans-serif;  
font-family: PingFangTC-Light, sans-serif;  
font-family: PingFangTC-Thin, sans-serif;  
font-family: PingFangTC-Medium, sans-serif;  
font-family: PingFangTC-Semibold, sans-serif;

苹方-港 的 CSS font-family 使用：  
font-family: PingFangHK-Regular, sans-serif;  
font-family: PingFangHK-Ultralight, sans-serif;  
font-family: PingFangHK-Light, sans-serif;  
font-family: PingFangHK-Thin, sans-serif;  
font-family: PingFangHK-Medium, sans-serif;  
font-family: PingFangHK-Semibold, sans-serif;

[http_pan.baidu.com_s_1b1cRP8]: http://pan.baidu.com/s/1b1cRP8