1# 自定义字体样式 2 3>  **说明：** 4> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6font-face用于定义字体样式。应用可以在style中定义font-face来指定相应的字体名和字体资源，然后在font-family样式中引用该字体。 7 8 9自定义字体可以是从项目中的字体文件中加载的字体，字体格式支持ttf和otf。 10 11 12## 定义font-face 13 14``` 15@font-face { 16 font-family: font; 17 src: url('/common/font.ttf'); 18} 19``` 20 21**font-family：** 22 23自定义字体的名称。 24 25**src：** 26 27自定义字体的来源，支持如下类别： 28 29- 项目中的字体文件：通过url指定项目中的字体文件路径(只支持绝对路径，详见[资源和文件访问规则](../../ui/js-framework-file.md)章节)。 30 31- 不支持设置多个src。 32 33 34## 使用font-face 35 36可以在style中定义font-face，然后在font-family样式中指定该font-face的名称，从而应用font-face定义的字体。 37 38**示例：** 39 40页面布局： 41``` 42<div> 43 <text class="demo-text">测试自定义字体</text> 44</div> 45``` 46 47页面样式： 48 49``` 50@font-face { 51 font-family: font; 52 src: url("/common/font.ttf"); 53} 54.demo-text { 55 font-family: font; 56} 57``` 58
