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