harmony 鸿蒙Custom Font Styles

  • 2022-12-13
  • 浏览 (563)

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;
  }

你可能感兴趣的鸿蒙文章

harmony 鸿蒙JS Service Widget UI Components

harmony 鸿蒙Data Types

harmony 鸿蒙button

harmony 鸿蒙calendar

harmony 鸿蒙chart

harmony 鸿蒙clock

harmony 鸿蒙divider

harmony 鸿蒙image

harmony 鸿蒙input

harmony 鸿蒙progress

0  赞