How to set the default font in uniapp

Uniapp is a cross-platform application development framework based on the Vue.js framework, which can be used to develop applications for multiple platforms such as Android, iOS, and H5. Font selection and setting is a very important aspect when developing applications. This article will explain how to set the default font in Uniapp.

In Uniapp, setting the default font can be achieved in two ways: one is to set it in the global style file, and the other is to set it in the component.

1. Set in the global style file

Uniapp’s global style file is uni.css, which can be found in the root directory of the project. In this file, you can set the global style of the application, including font settings.

First, add the following code at the beginning of the global style file:

@font-face {
  font-family: 'my-font';
  src: url('@/static/font/my-font.ttf') format('truetype');
}

Where, my-font is the name of the custom font, @/static/font/my-font.ttf is the font The path to the file. It should be noted that the font files need to be placed in the static directory of the project.

Next, add the following code to the style that needs to use the font:

body {
  font-family: 'my-font';
}

Here, taking the body element as an example, set the default font to the customized my-font.

2. Set the font in the component

In some cases, we may need to set the font separately in the component. At this time, you can add the following code to the component's style file:

@import url('https://fonts.googleapis.com/css?family=Roboto');

This code can introduce the Roboto font in the Google font library. Then, add the following code to the style that needs to use the font:

.my-class {
  font-family: 'Roboto';
}

Here, take the element named my-class as an example and set the font to Roboto.

It should be noted that when setting the font in the component, it is best not to use inline style, but to set it in the style file. This keeps the code readable and maintainable.

Summary

Setting the default font in Uniapp can be achieved through a global style file or a component style file. When setting the font in the global style file, you need to add the @font-face code in front of the font file, and then set the font-family in the style that needs to use the font. When setting the font in the component style file, you can use @import to introduce an external font library, and then set the font-family within the style.

Setting the default font correctly can improve the user experience of the application and better meet user needs.

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