How to use special fonts in uniapp

With the development of the mobile Internet, more and more developers choose to use uniapp to develop mobile applications. However, in some special cases, we need to use custom fonts. So how to use special fonts in uniapp?

Method 1: Upload TTF file in HBuilderX

1. Open HBuilderX and find the "static" folder in the project root directory.
2. Create a new "fonts" folder under this folder, and put the font file (TTF format) you want to use in this folder.
3. Create a new "css" folder under the "static" folder and create a "font.css" file.
4. Add the following code in the font.css file:

@font-face {
    font-family: "自定义字体名称";
    src: url('../fonts/字体文件名称.ttf');
}

Among them, the custom font name is the font name you want to define, and the font file name is the font file you uploaded The file name is as shown below:

5. Introduce the css file into the app.vue file. The specific code is as follows:

<style>
    @import &#39;./static/css/font.css&#39;;
</style>

6. In the page where you need to use a custom font, add the following code:

<style>
    .uni-text{
        font-family: "自定义字体名称";
    }
</style>

In this way, you can use your custom font in the text you need.

Method 2: Use online fonts

In some cases, we may not have our own font files. We can obtain the fonts we need through some online font libraries.

1. Open an online font library (such as fontawesome, etc.) and find the font you need.
2. Find the font library code on the official website and copy it.
3. Introduce the style code of this library into the app.vue file. The specific code is as follows:

<style>
    @import &#39;./static/css/fontawesome.min.css&#39;;
</style>

4. In pages that need to use special fonts, add similar code:

<view></view>

This way you can not only use special fonts, but also special symbols.

Summary:

Both of the above methods can be used to use special fonts in uniapp. Both methods have their own advantages and disadvantages. You need to choose the appropriate method according to your actual situation.

By using custom fonts or online fonts, you can make mobile applications more colorful and make the user experience more comfortable.

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