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