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