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