h5引用项目里css_H5（nuxt）项目引入字体

H5(nuxt)项目引入字体

闲话少说

方法1：

1.下载所需要的字体，.ttf格式本文以(FZCYJ.ttf 为例)

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

@font-face {

font-family: "华文行楷";

src: url('stxingka.ttf');

font-weight: normal;

font-style: normal;

}

3.App.vue中的style里引入

4、添加loader

module: {

rules: [

{

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

loader: 'url-loader',

options: {

limit: 10000,

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

}

]

}

5.使用

上述方法弊端：

ttf文件教大，页面加载过慢，影响用户体验

解决方向：压缩ttf文件

方法2： font-spider(字蛛)压缩ttf

先附上官方链接：http://font-spider.org/

GITHUB：https://github.com/aui/font-spider/blob/master/README-ZH-CN.md

使用教程：https://www.jianshu.com/p/8ef246692d14

上述方法弊端

font-spider原理是解析html页面中的含有中文字的标签，然后解析标签，将需要的ttf压缩，将压缩后的ttf文件放到项目中去，**但是，这种ttf文件会解析页面中已经存在的字体，而我们的项目是单页面应用，都是打包后的js文件，没有像静态页面中已存在的字体**，所以当我们把压缩好的ttf文件放到静态页面中尝试时，确实是有效的，可当我们放到项目中就失效了，这是我能想到能解释这个现象的唯一原因了。

所以怎么办？

方法3：

在万籁俱寂之时，为我无意间翻到了一个网站叫‘有字库“，网址是：https://www.webfont.com

具体使用方法

1、注册登录

2、检索到需要的字体

3、点击使用，下面照搬就行

这个在线字体库的唯一的优势就是它的js文件通过cdn加速过，加载字体文件的速度提高了，其他并没有什么特别之处。但是，为什么我后来又放弃了呢？当你搜一下下面的字体时突然发现

兄弟有钱不？

总结

如果你的产品跟你说：“去他妈的用户体验。”我强烈推荐方法1

如果你使用的前端项目不是基于node应用使用方法2，且你不想这么费事，那就方法3。

敲黑板

天真的你们是不是以为这就完了，还有方法4呢？我怎么可能不解决问题就结束了呢？史上最强的解决方案来啦。。。

我："那个，口渴吗？"

她：“什么事？”

我：“这个图能帮我切一下吗？”

她：“行啊！”

我：“顺便把这个字体也放进去吧！”

她：“可以的，现在就要吗？”

我：“没事没事，你慢慢做，我不急”

...半个小时候，美团的小哥在楼梯间吼道：“徐先生，徐先生，您的奶茶到了！”

完结

h5引用项目里css_H5（nuxt）项目引入字体相关推荐

Vue现有项目改造为Nuxt项目
公司项目,最初只为了实现前后端分离式开发,直接选择了vue框架进行开发,然而现在项目基本完成了,发现蜘蛛根本就抓取不到网站数据,搜索引擎搜出来,都是一片空白没有数据,需要对项目做SEO优化. 本人第一 ...
全局安装nuxt_Nuxt项目搭建到Nuxt项目部署
a.为什么? Vue.js原来是开发SPA(单页应用)的,但很多人想用Vue开发多页应用(有利于SEO操作),并在服务端完成渲染,于是Nuxt.js框架出生了,可实现用命令把vue项目生成为静态htm ...
H5（nuxt）项目引入字体
H5(nuxt)项目引入字体闲话少说方法1: 1.下载所需要的字体,.ttf格式本文以(FZCYJ.ttf 为例) 2.先自己定义一个font.css文件,字体文件的路径引入 @font-face ...
jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下使用vue-cli构建的vue项目,webpack的配置文 ...
eclipse项目中关于导入的项目里提示HttpServletRequest 不能引用的解决办法
eclipse项目中关于导入的项目里提示HttpServletRequest 不能引用的解决办法当使用eclipse导入外部的web工程时,有时会提示HttpServletRequest, Ser ...
如何在TypeScript/JavaScript项目里引入MD5校验和
摘要:MD5校验和则是其中一种数学算法,通常是使用工具对文件计算得出的一组32 个字符的十六进制字母和数字. 本文分享自华为云社区<TypeScript/JavaScript项目里如何做MD5校 ...
vue如何在一个工程里判断h5还是pc，（利用在一个页面显示不同router-view内容原理，本文只使用于单页面项目，多页面项目请查看我另一篇博文）
本文只适用于单页面项目,多页面项目请查看我另一篇博文 vue如何在一个工程里显示pc和手机端(适用多页面复杂项目) https://blog.csdn.net/qq_37816525/article/ ...
Nuxt 项目引入外部Js的正确姿势，问题描述：打包构建之后引入的外部 js失效，构建之后的 .nuxt 文件夹下的js文件中，引入 js 的script标签凭空消失！
首先先说我遇到的问题描述: 我是用vue + nuxt项目,项目中使用了阿里播放器,于是我在vue页面中直接引入了阿里播放器的 css和js文件,然后运行没有任何问题:如下图所示: 但是! ...
在前端项目里引入字体
前言最近做可视化看板产品经理觉得默认字体丑,那么只能在项目里引入一下字体了. 注: vue项目项目里使用的是scss,对于css和less 没有进行测试实现分享一个下载ppt.字体的网址:第一 ...

h5引用项目里css_H5（nuxt）项目引入字体

h5引用项目里css_H5（nuxt）项目引入字体相关推荐

最新文章

热门文章