How to set fonts in Uniapp

In mobile development, font setting is a very important aspect. If the font is set appropriately, it can improve the reading experience of the App and enhance the user's comfort. This article mainly introduces how to set fonts in Uniapp.

1. Basic concepts

In Uniapp development, we often need to adjust the text content style, including font, color, size, etc. Among them, font refers to the style or font used in text, which can be divided into system fonts and custom fonts. System fonts are fonts that already exist in the system by default. If you only need the size and color of the font, you can directly use the system font; while custom fonts refer to fonts that need to be created or referenced by yourself for use in specific scenarios.

In Uniapp, fonts can be set in two ways:

• Setting using css style sheets
• Setting through global configuration

Next, we will introduce these two methods in detail.

2. Setting through css

To set the font through css, you need to add the corresponding code to the style sheet. The code example is as follows:

text {
  font-family: 'PingFang SC', 'Helvetica Neue', monospace;
  font-size: 16px;
  font-weight: bold;
}

With the above style code, the text will be displayed in "PingFang SC" font, 16px font size and bold. Among them, "PingFang SC" is a system font. If this font does not exist in the system, it will affect the display effect of the corresponding text.

In addition to system fonts, we can also use custom fonts. There are many ways to reference custom fonts. Here we introduce a more common method: citing through external links.

@font-face {
  font-family: 'MyFont';
  src: url('http://www.example.com/fonts/MyFont.ttf');
}

text {
  font-family: 'MyFont';
  font-size: 16px;
  font-weight: bold;
}

Among them, we specify a custom font named "MyFont" through the @font-face rule in the style sheet, and its reference path is 'http://www.example.com/fonts /MyFont.ttf'. Then, where we need to use the font, we only need to set font-family to the name of the font.

In addition to font-family, we can also set the size and thickness of the font through attributes such as font-size and font-weight.

3. Setting through global configuration

In addition to using css for font settings, Uniapp also provides a global configuration method. Through global configuration, we do not need to set styles in each relevant page, thereby reducing code redundancy.

{
  "app-plus": {
    "nvue": {
      "fontsize": "20px",
      "fontfamily": "PingFang SC"
    }
  }
}

In the global configuration, we set the font size and style through the two properties app-plus -> nvue -> fontsize and app-plus -> nvue -> fontfamily. Among them, the fontsize attribute is used to set the font size, and the fontfamily attribute is used to set the font name. When we are in related components, we can use related fonts without specific style settings.

4. Summary

Through the introduction of this article, we have learned how to set fonts in Uniapp. In addition to setting via css, we also learned how to use global configuration. The choice of font settings needs to be made based on the specific situation. At the same time, attention should be paid to font copyright issues to avoid legal issues.

The above is the detailed content of How to set fonts in Uniapp. For more information, please follow other related articles on the PHP Chinese website!