在工程的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 这样就可以看到这个炒鸡丑的字体了,就下面的最后一行
vue页面

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

这玩意的作用

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

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

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

Logo

前往低代码交流专区

更多推荐