Shulou(Shulou.com)05/31 Report--

This article mainly introduces vue how to introduce ttf font file related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this vue how to introduce ttf font file article will have a harvest, let's take a look.

The specific steps are as follows:

1. First, create a vue.js project in vue-cli

Vue create project-name

After the 2.vue.js project is created, create a font.css file in the project and add the following code

@ font-face {

Font-family: 'FZCYJ'; / / rename the body name

Src: url ('FZCYJ.ttf'); / / introduce fonts

Font-weight: normal

Font-style: normal

}

After the 3.font.css file is created, configure the following in the webpack.base.conf.js file

{

Test:/\ / (woff2? | eot | ttf | otf) (\?. *)? $/

Loader: 'url-loader'

Options: {

Limit: 10000

Name: utils.assetsPath ('fonts/ [name]. [hash: 7]. [ext]')

}

}

4. Finally, after the webpack.base.conf.js file is configured, you can use the @ import method in the project to introduce the ttf font file.

@ import'. / common/font/font.css'

This is the end of the article on "how to introduce vue into ttf font file". Thank you for reading! I believe you all have a certain understanding of "how to introduce vue into ttf font files". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.