前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >网页特殊字体过大的优化

网页特殊字体过大的优化

作者头像
天天_哥
发布2018-09-29 14:44:15
1.7K0
发布2018-09-29 14:44:15
举报
文章被收录于专栏:天天

html网页引用中文字体,文件过大,加载缓慢的解决办法

解决办法:

一、字蛛

原理

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

==font-spider 仅适用于固定文本,如果文字内容为动态可变的,新增的文字将无法显示为特殊字体。==

使用步骤:

1.安装node.js;

2.安装字蛛:

代码语言:javascript
复制
npm install font-spider -g 

3.运行字蛛

代码语言:javascript
复制
font-spider C:\Users\wangchao\Desktop\index*.html 
<!--也就是你的html完整路径 【*】 是通配符,表示会扫描所有的html文件 -->
<!--要是打包单个html中使用的特殊字体文字,将文件名改成对应的文件名-->

4.运行完后

代码语言:javascript
复制
<!--发现字体文件的根目录多了一个font文件夹,文件夹里存放的是原来字
体文件的备份,而网页引用的是使用字蛛后压缩保存的字体-->
二、在线提取字体

字体生成器

代码语言:javascript
复制
    <!--css-->
    .font {
        font-size: 32px;
        color: skyblue;
        font-family: 'sx';
    }
    
    @font-face {
        font-family: 'sx';
        src: url('suxin-subfont.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    
    <!--html-->
     <p class="font">京德匠心铸器</p>

也可以看出来字体文件生效了,但是同样,也不支持动态的添加的文字

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.07.19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • html网页引用中文字体,文件过大,加载缓慢的解决办法
    • 一、字蛛
      • 二、在线提取字体
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档