harmony 鸿蒙Custom Font Styles
Custom Font Styles
font-face is used to define the font style. You can define font-face in style to specify a font name and resource for your application and then reference this font from font-family.
The custom font can be loaded from the font file in a project or a network font file.
NOTE
The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The font format can be .ttf or .otf.
Defining @font-face
@font-face {
font-family: HWfont;
src: url('/common/HWfont.ttf');
}
font-family: name of the custom font.
src: source of the custom font, which can be a font file in the project or an online font file.
Font file in the project: Specify the absolute path of the font file in the project through url. For details, see File Organization.
Online font file: Specify the address of the online font through url.
You can set only one src attribute.
Using font-face
You can set font-face in style and specify the name of the font-face using font-family. The code snippet is as follows:
- Page layout
<div>
<text class="demo-text">Test the custom font.</text>
</div>
- Page style
@font-face {
font-family: HWfont;
src: url("/common/HWfont.ttf");
}
.demo-text {
font-family: HWfont;
}
你可能感兴趣的鸿蒙文章
- 所属分类： 后端技术
- 本文标签：
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦