How to introduce vue into ttf Font File
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.
