1 Star 0 Fork 5.1K

youguilin / docs

forked from OpenHarmony / docs 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
自定义字体样式.md 1.51 KB
一键复制 编辑 原始数据 按行查看 历史
mamingshuai 提交于 2021-06-02 01:00 . update OpenHarmony 2.0 Canary

自定义字体样式

font-face用于定义字体样式。应用可以在style中定义font-face来指定相应的字体名和字体资源,然后在font-family样式中引用该字体。

自定义字体可以是从项目中的字体文件中加载的字体。

说明: 字体格式支持ttf和otf。

定义font-face

@font-face {   
  font-family: HWfont; 
  src: url('/common/HWfont.ttf'); 
}

font-family:

自定义字体的名称。

src:

自定义字体的来源,支持如下类别:

  • 项目中的字体文件:通过url指定项目中的字体文件路径(只支持绝对路径,详见资源和文件访问规则章节)。

  • 不支持设置多个src。

使用font-face

可以在style中定义font-face,然后在font-family样式中指定该font-face的名称,从而应用font-face定义的字体。

示例:

页面布局:

<div>    
  <text class="demo-text">测试自定义字体</text>  
</div>

页面样式:

@font-face {
  font-family: HWfont;
  src: url("/common/HWfont.ttf");
}
.demo-text {
  font-family: HWfont;
}
1
https://gitee.com/yougl/docs.git
git@gitee.com:yougl/docs.git
yougl
docs
docs
master

搜索帮助

53164aa7 5694891 3bd8fe86 5694891