vue中引入字体文件

rose 发布于2019-08-23 14:06 / 1378人阅读

摘要：在用来写一官网的时候，想引入外部字体文件，毕竟总感觉他自己的字体有点难看，在这里记录下先下载字体文件所需的文件我这里想引入的是华文行楷字体百度后下载了一个多的文件将字体文件引入自己定义一个文件夹，放入下载好的文件先自己定义一个文件，将下载好

在用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里引入

在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的注意事项

GPU云服务器云服务器 php中引入文件. cdn引入vue 中引入的 java中引入异常

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100092.html

一个高仿追书神器的vue阅读器。已成功做成app

摘要：原创，基本上是界面，新加了七八个功能，解决了前辈阅读器上的绝大部分，并成功添加路径打包成。毕竟只是一个学习项目跨域问题本次开发使用的是代理追书神器，是不需要后台认证直接可以跨域的接口，以实现在移动端显示的效果。应届毕业生，目前正在找工作，简历需要所以开发了这个app。刚开始开发也是一脸懵逼，因为没得后台，一些逻辑功能也不知道怎么拓展。好在看到了追书神器api接口，顿时让我决心做出这一...

miracledan 2019-08-22 18:18 评论0 收藏0
vue 项目总结一组件开发的配置和例子

摘要：入口文件，影响全局，作用是引入全局使用的库公共的样式和方法设置路由等。项目里总会有一些复用的组件，例如弹出框发送手机验证码图片上传等，将它们作为通用组件，避免重复工作结构如下可以根据功能模块建立文件夹，放置本功能会用到的通用组件。上一篇文章 https://segmentfault.com/a/11... 介绍了项目里文件夹的分类和作用，这次主要说明 src 文件夹里具体的文件分类和...

melody_lql 2019-08-02 16:00 评论0 收藏0
vue 项目总结一组件开发的配置和例子

摘要：入口文件，影响全局，作用是引入全局使用的库公共的样式和方法设置路由等。项目里总会有一些复用的组件，例如弹出框发送手机验证码图片上传等，将它们作为通用组件，避免重复工作结构如下可以根据功能模块建立文件夹，放置本功能会用到的通用组件。上一篇文章 https://segmentfault.com/a/11... 介绍了项目里文件夹的分类和作用，这次主要说明 src 文件夹里具体的文件分类和...

isaced 2019-08-22 11:16 评论0 收藏0
使用vue完成微信公众号网页小记

摘要：前言公司最近有一个页面的功能，比较简单的一个调查表功能，嵌套在我们微信公众号里面。同时用到了微信的登录和分享接口。参考链接使用微信接口前端部分我们用微信接口主要是做的登录和分享功能，首先是上微信公众平台上边看看，把权限搞好之后后端配置。 showImg(https://segmentfault.com/img/bVbrOkH); 前言：公司最近有一个H5页面的功能，比较简单的一个调查...

phoenixsky 2019-08-02 16:14 评论0 收藏0