前端js/CSS中引入字体(@font |
您所在的位置:网站首页 › 下载了字体包怎么用 › 前端js/CSS中引入字体(@font |
前端设计有时候会用到系统没有的字体比如说艺术字,这个时候需要自己引入,从而达到更好的视觉效果。 一般采用@font-face规则进行字体的引入。CSS3 @font-face 规则 以下是详细步骤: 一、在CSS引入字体; 首先要有字体包(找美工要或者网页下载都可以),将其放置在项目的font文件夹下面,然后就可以进行下一步。 注意: (1)经过尝试,有的项目仅支持 ' .ttf ' 类型的字体包。 (2)如果文件类型不是' .ttf ' ,推荐使用在线转字体包格式的工具。Convertio — 文件转换器。 1、单个字体引入 在js对应的less/CSS文件中: @font-face { font-family: "AdobeHeitiStd-Regular"; src: url("../../../../../../assets/font/AdobeHeitiStd-Regular.ttf"); } .a { font-size: 11px; font-family: "AdobeHeitiStd-Regular"; }2、多个字体引入 @font-face { font-family: "AdobeHeitiStd-Regular"; src: url("../../../../../../assets/font/AdobeHeitiStd-Regular.ttf"); } @font-face { font-family: "SourceHanSansCN-Bold"; src: url("../../../../../../assets/font/SourceHanSansCN-Bold.ttf"); } .a { color: #FFFFFF; font-family: "AdobeHeitiStd-Regular"; font-size:12px; font-weight: normal; } .b { color: #FFFFFF; font-family: "SourceHanSansCN-Bold"; font-size:12px; font-weight: normal; }二、在JavaScript中使用 以引入多个字体为例。 1、使用className = { styles.a } 总人数 30 2、直接使用style = {{ fontFamily:AdobeHeiTiStd-Regular }} {fontFamily: "SourceHanSansCN-Bold", fontSize: 12}}总人数 {fontFamily: "AdobeHeitiStd-Regular", fontSize: 12}}30感谢:CSS3中引入多种自定义字体(font-face)_穆雄雄的博客-CSDN博客 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |