页面引入外部字体ttf,如何提取所需要的ttf字体或者加载过慢的解决方法-1127更新
最近几天编写手机端的页面之后,文中需要华文行楷字体,在网上下载后,引入到了自己的前端页面,以为没有什么事了,继续码代码
@font-face {
font-family:huawen;
src: url(./css/华文行楷.ttf);
}
body{
font-family: huawen;
}
最终在测试的时候出现问题了,苹果手机的用户,基本看不出来什么问题,安卓测试了一下,页面打开时原来的字体,随着进度条的推移,慢慢华文行楷的字体出来了,问题,加载太慢了,看了一下引入的源文件"华文行楷.ttf" 3M,有点大。
方法一:搜索关键词,ttf提取工具(方法失败)
网上很多都是介绍了Google的一款工具,sfnttool 是谷歌开源项目 sfntly 内置的工具,他的作用是从一个字体文件中提取指定的文字,导出的字体中将只包含你需要的文字。
【下载】http://download.csdn.net/detail/ldpjay/8822587
1. 确保你的电脑已经安装了Java环境(能运行Java命令),这是必须的。
2. 命令行进入到sfnttool所在目录下。(一个小技巧,在当前文件夹里按住Shift再右键,里面有个“在此处打开命令行”。)
3. 输入下面的命令即可:java -jar sfnttool.jar -s '这是一段测试文字' msyh.ttf msyh_simplify.ttf
4. 输出字体在同目录下。
但是个人根据此方法试了好多次都是失败告终,同事也试了好多次,不知道原因出现在哪,是输出了,6k的大小,无论是输入什么文字。目前还不知道问题出现在哪,如果您看到并且试验成功的话,欢迎交流一下!
方法二:FontCreator字体编辑软件
想着以为可以大量输入,但是想象是美好的,没有这个功能,需要手动一点点把需要的字体拿出来,是个漫长的过程,这个方法也就排除了
方法三:搜索关键词,压缩ttf工具
后来转换了一下思想,既然不能从我的 “华文行楷.ttf”里面提取我需要的字体,我的初衷是变小就行了,那就压缩呗!这个想法一有,就开始找实现的方法,html网页引用中文字体,文件过大,加载缓慢的解决办法【字蛛】 一文吸引了我的注意,文章太长,先操作实现了一下,感觉ok,步骤也不是很长。
1、node -v :安装完node之后,测试node是否安装
2、npm config set registry http://registry.npm.taobao.org
3、npm info underscore (如果上面配置正确这个命令会有字符串response)
4、npm –registry http://registry.cnpmjs.org info underscore:命令行指定
5、npm install font-spider –g:安装字蛛
6、font-spider C:\Users\wangchao\Desktop\index*.html:生成新的字体库,nodejs 命令行输入
也就是你的html完整路径 【*】 是通配符,表示会扫描所有的html文件 ,然后回车
方法四--1127更新:利用现有的在线字体提取工具-https://www.fontke.com/tool/subfont/
致此,压缩后的会保存在同级目录下的.font-spider里面,直接用就行了
页面引入外部字体ttf,如何提取所需要的ttf字体或者加载过慢的解决方法-1127更新的更多相关文章
- javac 不是内部或外部命令 和 错误 找不到或无法加载主类 的解决方法
使用package语句与import语句. 实验要求:按实验要求使用package语句,并用import语句使用Java平台提供的包中的类以及自定义包中的类.掌握一些重要的操作步骤. 代码: 模板1: ...
- 页面加载完毕后调用js方法进行布局操控 已实验
页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...
- ios 底部用定位 fixed。在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去。解决方法
ios 底部用定位 fixed.在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去.解决方法 $("input").focus(function() ...
- vue页面引入外部js文件遇到的问题
问题一:vue文件中引入外部js文件的方法 //在vue文件中 <script> import * as funApi from '../../../publicJavaScript/pu ...
- JSFF或JSF页面加载时触发JavaScript之方法
现象一 最近在项目中遇到这么一个问题,有些页面元素是在页面加载时通过JavaScript动态渲染而成.当生成这些元素的JavaScript脚本被放置于JSPX文件中时,界面渲染没有问题.但是当我们把生 ...
- jQuery页面加载初始化的3种方法
jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...
- 减少页面加载时间的n种方法
减少HTTP请求 1:减少调用其他页面.文件的数量 2:使用css spirit , 减少图片加载次数 压缩js,css代码 1:一般js.css文件中存在大量的空格.换行.注释,这些利于阅读,如果能 ...
- (转,记录用)jQuery页面加载初始化的3种方法
jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...
- (转载) jQuery页面加载初始化的3种方法
jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...
随机推荐
- 【转载】SQL执行计划
要理解执行计划,怎么也得先理解,那各种各样的名词吧.鉴于自己还不是很了解.本文打算作为只写懂的,不懂的懂了才写. 在开头要先说明,第一次看执行计划要注意,SQL Server的执行计划是从右向左看的. ...
- centos7.3上用源代码安装zabbix3.2.7
安装zabbix之前请自行先搭建好LAMP环境! 1.下载源码安装包并解压 1.1 下载 [root@nmserver- ~]# mkdir zabbix [root@nmserver- ~]# cd ...
- 【2017-06-17】QtGui基础控件:QSpinBox及QDoubleSpinBox
今天开始一个新的系列,主要是翻译并摘录QtGui中基础空间的常用方法,并做一些简单的实验程序: 我觉得这是一个炒冷饭的行为,但有时候冷饭不能不炒,不热不好吃,而且也很容易发霉. 其实到现在这种状态,对 ...
- java对字符串进行加密和解密(以下是来自其他博主)
背景:需要对读取数据库配置的文件进行加密,防止他人拿到数据,而对自己的代码,有要实现进行解密,网上给的加密方式,什么MD5,base64,还有等等,都太复杂,而且有些是单向的,只加密不解密,以下代码, ...
- ACM Arabella Collegiate Programming Contest 2015 F. Palindrome 并查集
题目链接:http://codeforces.com/gym/100676/attachments 题意: 给一个字符串,有一些约束条件,两个位置要相同,有一些是问号,求最后有多少种方案回文? 分析: ...
- C#流程控制语句
C#流程控制语句 一.选择语句 当程序中需要进行两个或两个以上的选择时,可以根据条件的判断来选择将要执行的一组语句. ?if语句 ?switch语句 二.循环语句 循环语句是对一个程序模块进行的重复操 ...
- Spring的jdbcTemplate 与原始jdbc 整合c3p0的DBUtils 及Hibernate 对比 Spring配置文件生成约束的菜单方法
以User为操作对象 package com.swift.jdbc; public class User { private Long user_id; private String user_cod ...
- iOS面试题总结(持续更新)
过段时间打算跳槽,找了一些面试题来做,在这里做个总结方便review,希望能对要面试的童鞋有帮助. 以下为面试题: 运行以下代码会有什么结果 NSString *str1 = @"str1& ...
- JS里访问纯数字ID对象时出现问题
<p id="1">Hello</p> 例如上面的例子,id为纯数字会出错.此时用js去获取该对象会报错,查找不到该对象. 原因:必须是字母开头,或是下划线 ...
- C++声明之CV限定符
目录 1.const 1.1 const obj 如果调用 non-const member fun会编译出错 经典错误 1.2 例子:STD里的操作符重载 1.3 例子:<cpp primer ...