在用vue来写一官网的时候，想引入外部字体文件，毕竟总感觉他自己的字体有点难看，在这里记录下

1.先下载字体文件所需的.ttf文件

我这里想引入的是华文行楷字体
百度后下载了一个3M多的ttf文件

2.将字体文件引入

自己定义一个文件夹，放入下载好的.ttf文件

先自己定义一个font.css文件，将下载好的字体文件的路径引入


@font-face {font-family: "华文行楷";src: url('stxingka.ttf');font-weight: normal;font-style: normal;
}

在App.vue中的style里引入


&lt;style lang="less" rel="stylesheet/less"&gt;@import "./common/font/font.css";
&lt;/style&gt;

在webpack的配置文件里要加上解析.ttf文件的规则


module: {rules: [{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}}]
}

使用的话，就按照原本的字体名称，如我下的是华文行楷，就直接用华文行楷就可以了

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

往期好文推荐：
- 判断iOS和Android及PC端
- 纯css实现瀑布流（multi-column多列及flex布局）
- 实现单行及多行文字超出后加省略号
- 微信小程序之购物车和父子组件传值及calc的注意事项

来源：https://segmentfault.com/a/1190000017397287

转载于:https://www.cnblogs.com/qixidi/p/10130284.html

vue中引入字体文件相关推荐

css引入本地字体文件,关于css中引入字体文件
关于css中引入字体文件 css样式代码: @font-face { font-family: Lovelo-Black;//定义font的名字 src: url(font/Lovelo Black. ...
Vue中引入字体并解决字体文件过大问题
利用 CSS3 @font-face 规则指定名为"myFirstFont"的字体,并指定在哪里可以找到它的URL: @font-face {font-family: myFir ...
Vue中引入css文件
一.全局引入 import "@/文件路径"; //@代表的是你的项目根路径例如: 二.在style标签中引入(可设置成局部) 在标签上添加 scoped 属性后则变成了局部引用 ...
前端项目中引入字体文件并使用
首先是下载所需的字体文件,将文件存放在自定义的静态资源目录. 然后在需要引入页面的style模块加入如下代码直接在需要的地方引用text_class样式就可以啦
Vue中引入字体图标失败，显示方框（已解决）
问题描述: 在vue开发中,main中引入iconfont.css后,给标签添加相应类名后却不能正常显示,如下图解决方案: 其实问题很明显,就是忘了给i标签加上iconfont类名 <div ...
vue中引入外部文件js、css、img的方法
第一种方法,直接放到相对路径下,位置:./static/js/main.js,./static/css/main.css,./static/img/test.png 第二种方式: ES6的import ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
在style标签中，vue项目引入style文件，外部css文件
在style标签中,vue项目引入style文件,外部css文件一.css是什么? 二.使用步骤 1.使用style标签引入 2.在style标签内使用@import导入总结一.css是什么? ...
在vue中引入外部的css文件
在vue中引入外部的css文件在项目的src文件下,新建一个style文件夹,存放css文件. 1. 全局引入将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 imp ...

vue中引入字体文件

1.先下载字体文件所需的.ttf文件

2.将字体文件引入

vue中引入字体文件相关推荐

最新文章

热门文章