vue中引入第三方字体文件的方法示例
2019-05-16 18:02
741 查看
在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下
1.先下载字体文件所需的.ttf文件
我这里想引入的是华文行楷字体
百度后下载了一个3M多的ttf文件
或者https://www.jb51.net/fonts/点击此链接,进行字体下载
2.将字体文件引入
自己定义一个文件夹,放入下载好的.ttf文件
先自己定义一个font.css文件,将下载好的字体文件的路径引入
@font-face { font-family: "华文行楷"; src: url('stxingka.ttf'); font-weight: normal; font-style: normal; }
在App.vue中的style里引入
<style lang="less" rel="stylesheet/less"> @import "./common/font/font.css"; </style>
在webpack的配置文件里要加上解析.ttf文件的规则
module: { rules: [ { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] }
使用的话,就按照原本的字体名称,如我下的是华文行楷,就直接用华文行楷就可以了
在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题:
报以下错误
搞了好久没搞定,最后才找到解决方法(还是没有找到原因)
修改字体图标的css中引入字体文件的路径
以前的---->>修改后:
最后改成绝对路径就好了,但是原因还没搞懂
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Vue 第三方字体图标引入 Font Awesome的方法
- Android Studio导入第三方类库的方法( jar包、so文件、zip包等资源文件引入)
- vue中引入第三方字体图标库iconfont,及iconfont引入彩色图标
- vue项目中引入外部css以及js文件的方法
- Vue 第三方字体图标引入 Font Awesome
- vue踩坑:用import引入字体文件时报错解决
- 比较好的前端方法库及一些vue如何引入静态文件
- 移动端引入的字体文件过大处理方法
- vue-cli2.x项目优化之引入本地静态库文件的方法
- vue项目引入字体.ttf的方法
- 解决webpack+Vue引入iView找不到字体文件的问题
- PHP判断文件是否被引入的方法get_included_files用法示例
- Vue-cli单文件组件引入less、sass、css样式的不同方法
- Vue项目中引入外部文件的方法(css、js、less)
- vue 引入公共css文件的简单方法(推荐)
- 浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
- 创建Vue项目以及引入Iview的方法示例
- vue组件引入第三方js组件(无暴露对象或方法的js)
- Vue-cli项目中引入外部/第三方css/js/less文件具体步骤
- 本地Bootstrap文件字体图标引入却无法显示问题的解决方法