web自定义字体引用与资源压缩

在工程的static文件中新建fonts文件夹并将下载好的web字体文件夹以字体名称为名放入fonts文件夹下，目录结构如下图：

本文使用的这个炒鸡丑的英文字体为AhsanCalligraphyRegular，字体文件一般包含eot/woff/ttf/svg四种文件类型；Because 不同浏览器识别的字体格式不同，故需要四种文件类型

然后直接上代码

vue工程中App.vue

<template><div id="app"><img src="./assets/logo.png"><router-view/></div>
</template><script>export default {name: 'App'
}</script><style>/* 引入外部字体，不同浏览器识别的字体格式不同，故需要四种文件类型 */
@font-face {font-family:'AhsanCalligraphyRegular';   /*字体名称*/src:url('../static/fonts/AhsanCalligraphyRegular/AhsanCalligraphyRegular.eot');src:url('../static/fonts/AhsanCalligraphyRegular/AhsanCalligraphyRegular.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */url('../static/fonts/AhsanCalligraphyRegular/AhsanCalligraphyRegular.woff') format('woff'),  /* Modern Browsers */url('../static/fonts/AhsanCalligraphyRegular/AhsanCalligraphyRegular.ttf') format('truetype'),  /* Safari, Android, iOS */url('../static/fonts/AhsanCalligraphyRegular/AhsanCalligraphyRegular.svg#AhsanCalligraphyRegular') format('svg');  /* Legacy iOS */font-weight:normal;font-style:normal;
}</style>

Helloword.vue 中就可以直接调用字体了

<div class="hello"><h1 style="font-family: 'AhsanCalligraphyRegular'">Gyosho Test English</h1></div>

启动web服务，npm run dev 这样就可以看到这个炒鸡丑的字体了，就下面的最后一行

英文字体只有26个英文字母，但是中文大约有8万,而常用的也有3500字，所以中文字体裤是比较大的，何况还需要四种格式，所以在web加载的时候很耗费网络资源，字体文件太大，加载慢，怎么办呢？要是我们只加载我们用到的字体就好了，蹬蹬蹬瞪··· ···
我们来学习一个神器： font-spider（github地址：https://github.com/aui/font-spider）

这玩意的作用

压缩字体：智能删除没有被使用的字形数据，大幅度减少字体体积
生成字体：只用一个ttf格式，即可有 woff2、woff、eot、svg
字体格式生成使用方式见官网： http://font-spider.org/

若是使用了gulp，就直接用相应的构建工具gulp-font-spider（https://github.com/aui/gulp-font-spider）

目前还没有用到vue-cli中如何结合字体压缩，后续用到了继续分享，谢谢！

web自定义字体引用与资源压缩相关推荐

【Android 安装包优化】开启资源压缩 ( 资源压缩配置 | 启用严格模式的资源引用检查 | 自定义保留/移除资源配置 | 资源压缩效果 )
文章目录一.开启资源压缩二.启用严格模式的资源引用检查三.自定义保留/移除资源配置四.资源压缩效果五.完整配置 1.keep.xml 配置 2.build.gradle 构建脚本六.参考资 ...
@font-face使用自定义字体
一.自定义字体引用符号是什么? 在制作网页时,有些特殊图标放到字体里面引用类似于二.使用自定义字体引用符号 (已知字体却不知道字体里有多少符号或字体的情况用以下方法) 1.第一步先将制作好的自定义 ...
hexo的yelee主题使用自定义字体并用字蛛进行字体压缩的sed脚本
说真的,这个操作有点复杂,我也是花了一天时间才搞定,大部分时间都消耗在font-spider的调试上面了. 根目录路径: /home/appleyuchi/桌面/Github博客/整体测试/blog_ ...
css字压,CSS自定义字体的实现，前端实现字体压缩
CSS 自定义字体移动端如何兼容UI给的字体 [toc] 移动端的默认字体 IOS 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue And ...
【Flutter】Flutter 自定义字体 ( 下载 TTF 字体 | pubspec.yaml 配置字体资源 | 同步资源 | 全局应用字体 | 局部应用字体 )
文章目录一.Flutter 自定义字体 1.ttf 字体文件 2.ttf 字体资源配置 3.获取字体 4.全局使用字体 5.局部使用字体二.完整代码示例三.相关资源一.Flutter 自定义字 ...
html中css如何引用自定义字体 - 案例篇
html中css引用自定义字体,实现自定义字体样式效果(含案例) 网页中不同的字体,代码是怎么定义的?怎么引用外来字体文件? html 案例 · 代码如下: <!DOCTYPE html> ...
web项目访问引用jar内部的静态资源
一.实现原理 web项目访问引用jar内部的静态资源,在Servlet3协议规范中,包含在JAR文件/META-INFO/resources/路径下的资源可以直接访问. 二.举例说明如下图所示,是我 ...
java引入外部字体_Java中如何自定义字体文件（引用外部字体）？-字体文件
图源来自网络有时候我们在程序中,会使用到Java字体,但不是所有的字体系统中都会有,我们就可能会使用外部自定义字体,这样在程序迁移部署中就会少些工作,最近在一个项目中使用到了自定义字体文件,理顺了, ...
html引用不了自定义字体,html5 – 自定义@ font-face不加载chrome(chrome自定义字体无法渲染)...
自定义@ font-face不加载chrome(chrome自定义字体无法渲染)使用CSS自定义字体 @font-face { font-family:'gotham-rounded-medium'; ...

web自定义字体引用与资源压缩

web自定义字体引用与资源压缩相关推荐

最新文章

热门文章