美高梅4688官方网站

当前位置:4688美高梅集团 > 美高梅4688官方网站 > @font-face可以实现从服务器端加载字体,使用图片

@font-face可以实现从服务器端加载字体,使用图片

来源:http://www.top-horoskop.com 作者:4688美高梅集团 时间:2020-01-11 08:27

在我们拿到设计稿的时候经常会看到设计师用到一些特殊字体,不想用图片代替,而这些字体在普通电脑上是没有的,如果需要正常显示,我们就要下载字体的方式。

相信很多做前端的都会遇到这一类问题,当前网页需要引入一些特殊字体,过去这些字体通常使用图片代替,不仅增加了request请求,交互起来也不方便。

首先简单介绍一下fontspider的原理

  1. 爬行本地 html 文档,分析所有 css 语句
  2. 记录@font-face
    语句声明的字体,并且记录使用该字体的 css 选择器
  3. 通过 css 选择器的规则查找当前 html 文档的节点,记录节点上的文本
  4. 找到字体文件并删除没被使用的字符
  5. 编码成跨平台使用的字体格式

对于英文字体,下载下来比较小,一般都是几十K,可以接受。但是对于中文字体就不行了,一个字体都是几M,这个肯定不能让用户访问页面的时候去下载,那么我们一般使用图片来处理,使用图片会造成一些问题:

CSS3 @font-face(自定义字体)

相信很多人已经了解这个新特性了,在CSS3之前web设计师必须使用用户计算机上已经安装好的字体,如果需要特殊字体,必须以图片的形式放置在网页上。而现在我们可以通过CSS3的@font-face规则来定义我们想要的字体。
@font-face可以实现从服务器端加载字体,所有浏览器中使用的字体就可以不受本地字体的限制。对于@font-face可参照 w3school的@font-face。
就像任何一项技术的产生都会带来相应的利与弊一样,要使用“自己的”字体的话,需要使用@font-face属性。这就产生了个让人头疼的问题,中文不像英文,只有26个字母和一些简单的符号。中文有上万个字,每一个字都需要载入的话,一打开网页为了加载几个字就会话无缘无故花掉很多(很多)流量。

下面进去实际操作

1. 制作与维护成本很高。切图繁琐、高清屏适配繁琐、合并雪碧图更繁琐,后期修改更加繁琐。2. 用户体验差。导致网页不支持选中、复制、搜索、翻译、矢量缩放,也会影响视障用户使用读屏器操作网页。3. 带来更多带宽消耗。导出的图片体积随着文本面积增加,且字形无法重复利用,这消耗着大量的服务器资源。

字蛛的使用方法

就像某参老师跟我们说的一样,要想精通一件事情,就要先理解它的机制和原理。
字蛛的工作原理:通过对本地 CSS 与 HTML 文件的爬取,将用到的字符爬取出来并将没用到的这些字符数据从字体中删除以实现压缩,再生成跨浏览器使用的格式。
下面放上字蛛的链接 字蛛官网

图片 1

字蛛

粗略看了下字蛛官网的的使用说明,感觉说的很详细了。不过对于一些小白来说可能还有很多看不懂的地方。这里详细的介绍下:

  • #### 安装NodeJS

像官网说的那样安装好NodeJS;附NodeJS下载链接

  • #### 安装字蛛

打开Node.js command prompt如下图所示,并输入命令:npm install font-spider -g 回车执行

图片 2

NodeJS管理工具

  • #### 在 CSS 中声明WebFont

切换到你写的css页面声明字体,方法与CSS3的@font-face方法类似

          @font-face {
          font-family: 'pinghei';
          src: url('../font/pinghei.eot');
          src:
          url('../font/pinghei.eot?#font-spider')
          format('embedded-opentype'),
          url('../font/pinghei.woff') format('woff'),
          url('../font/pinghei.ttf') format('truetype'),
          url('../font/pinghei.svg') format('svg');
          font-weight: normal;
          font-style: normal;
          }
        /*使用选择器指定字体*/
        .home h1, .demo > .test {
        font-family: 'pinghei';
        }

注意:
1.<small>@font-face中的src定义的 .ttf 文件必须存在,其余的格式将由工具自动生成</small>
2.<small> 开发阶段请使用相对路径的 CSS 与 WebFont</small>

  • #### 爬取所需的字

运行 font-spider 命令:font-spider ./路径/文件名.html
页面所需的字体将会自动压缩好,原 .ttf 字体会备份,就是那个很大的文件夹。爬取压缩结束后原来8M左右的中文字体包现在只要6KB,还能将你页面所用到的字显示出来。

图片 3

爬取压缩

图片 4

备份的字体文件

1. 全局安装 gulp:

$ npm install --global gulp

有什么方法能实现中文字体webFont呢,就是今天讨论的话题:Font-Spider。我们可以去官网下载:

字蛛坑点:

这里建议对需要替换大段文字的文本少使用字蛛,因为使用后这样你会发现在有标点和空格的地方会出现“!”。
解决方案:
1.可以利用标签嵌套标点的方法进行微调。
2.有网友说 写成 font-family:Arial +自己的字体,感叹号就会消失 (本人未亲自测试)。

2. 进入项目根目录,作为项目的开发依赖(devDependencies)安装:

$ npm install --save-dev gulp

字蛛是一个中文字体压缩器,让网页自由引入中文字体成为可能。为了不让工程与体验制约着设计师对字体选择以及创意的实现,某个团队利用业余时间解决了中文WebFont的两大问题即压缩和转码,于是便有了Font-Spider的诞生。作为业界首款中文WebFont本地自动化压缩与转码工具,中文字体web化问题迎刃而解。它是一个web字体工具,通过自动化技术来压缩、转码跨平台的中文字体,让网页自由嵌入中文字体成为可能。

其他webFont在线制作网站

阿里webFont不仅能在线获取webFont还有海量图标网站制作的时候用起来很方便。
fontmin懒得写代码,fontmin客户端帮你解决问题,点击生成 duang~的一下生成新的字体包

3. 新建package.json

npm init

然后开始填写信息

图片 5

Paste_Image.png

如果不知道怎么填写可以

npm help package.json

字蛛原理

4、开始安装所要使用的依赖的插件

例如 安装gulp-cache

npm install gulp-cache --save-dev

图片 6

Paste_Image.png

会看到package.json里面也自动新增了依赖项

图片 7

Paste_Image.png

继续安装其他需要用到的插件……此处省略

依赖插件都安装好之后,我的package.json变成了这样:

{
      "name": "font_spider_demo",
      "version": "1.0.0",
      "description": "zip web-font",
      "main": "gulpfile.js",
      "dependencies": {
      "gulp": "^3.9.1"
    },
  "devDependencies": {
    "del": "^2.2.0",
    "gulp-cache": "^0.4.3",
    "gulp-font-spider": "^0.2.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-tinypng": "^1.0.2"
  },
  "scripts": {
    "test": "font"
  },
  "keywords": [
    "webfont"
  ],
  "author": "point_halo",
  "license": "UNLICENSED"
}

★ 爬行本地 html 文档,分析所有 css 语句

5、在项目根目录下创建一个名为 gulpfile.js 的文件:

开始写任务,新建gulpfile.js(说明:gulpfile.js是gulp项目的配置文件)

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less');

//定义一个testLess任务(自定义任务名称)
gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});

gulp.task('default',['testLess', 'elseTask']); //定义默认任务

//gulp.task(name[, deps], fn) 定义任务  name:任务名称 deps:依赖任务名称 fn:回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs:处理的文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径

本文由4688美高梅集团发布于美高梅4688官方网站,转载请注明出处:@font-face可以实现从服务器端加载字体,使用图片

关键词: