中文字体其实也可以用在网页上的
本文转载自http://hxgdzyuyi.github.io/blog/chinese-subset.html
中文字体和 @font-face
对于互联网而言,自定义字体从来不是一个陌生的东西,IE 4 从 1997 年起就已经支持在浏览器中嵌入自定义的字体。而这一种技术被 Goolge Fonts 等免费字体服务推到了一个新的高度。前端工程师借助于 @font-face , 可以轻松的在网页上使用各种字体,基本已经成为国外网页设计的标配了。
可是回过头来一看,中文 和 font-face 似乎从来没有什么交集, “在网页中使用个性化的中文字体?” 这看起来是一件很困难的事情, 并且很少人做过的事情。仔细想想,瓶颈基本上可以归结在两个点:
- 中文字符太多,制作精良的中文字体太少,成本也大。
- 中文字符太多,导致文件庞大,动辄数个 MB,下载成本太大。
如何解决中文字体过大的问题
相比起我们希望的, 在网页上使用中文字体,中文字体更早,并且更频繁的用于 PDF 上。 而且 PDF 同样对文件大小有很严苛的限制。基本上前辈们为了解决 PDF 文件可以使用各种漂亮的字体,并且文件体积足够小,有一种叫做 字体子集 (embedded subset) 的概念,就是将原有的字体裁剪出只被这个 PDF 文件使用的部分,从而达到缩小字体体积的目的。相对应的概念叫做 (full embedded fonts)。 参考这个方案,我们只需要针对特定的网页裁剪出特定的字体就可以了,这样让网页在流量,打开速度和美观上达到了和谐。
我们借助 Google Fonts 使用的类库 sfntly 可以轻松做到这一点, sfntly 可以轻松的处理基于 sfnt 格式存储的字体, 拆分, 裁剪, 生成 WOFF, TTF, EOT 等字体。
比如直接使用 sfntly 内置的 sfnttool, 可以看到它的命令帮助
java -jar sfnttool.jarSubset [-?|-h|-help] [-b] [-s string] fontfile outfilePrototype font subsetter-?,-help print this help information-s,-string String to subset-b,-bench Benchmark (run 10000 iterations)-h,-hints Strip hints-w,-woff Output WOFF format-e,-eot Output EOT format-x,-mtx Enable Microtype Express compression for EOT format]
可以轻松的从 MFYuehei.ttf 中提取出只有 '中文' 两个字的字体
java -jar sfnttool.jar -w -s '中文' MFYuehei.ttf new-MFYuehei.ttf
总的来说在裁剪字体这条方向上, 目前也有几种在这个方向上的努力, 稍做介绍。
- CjkSubsetter 本站使用的 Rack 中间件借 sfntly, 搭配 middleman 生成了现在所见的这个静态网站
- 方正字体云服务 收费, 方正字体
- justfont 收费, 使用 js 请求的方案, 原则上可以嵌入到任何网站, 有 api 请求限制, 字体有限。
如何找到优秀的中文字体
以下罗列几款推荐的,个人使用免费的资源
- 造字工房
- 新蒂黑板报体
- Unicode Font Guide For Free/Libre Open Source Operating Systems
- Ubuntu wiki - 免费中文字体
- TypeLand 儀鳳寫經體
中文字体的为设计带来的变革
作为浏览器的基本组成,可以和 Javascript 和 CSS 互动
显然,字符是网页最基本的组成部分。比起图片来,字体更加的灵活,可以更充分的使用浏览器原生的功能,给设计带来无限可能。
比如下表显示了中文字体和 CSS 互动的几个例子。这些还没有涉及到动画,可以更加的精彩。
字体属性 | 效果 |
---|---|
字号大小 | 大 / 小 |
颜色 | 颜 色 |
粗细 | 文 文 |
CSS3 Text Effects / SVG filters | 中文 |
可以使用浏览器原生的禁则功能,包括响应式的网页设计。
浏览器每一个行文字的结尾都遵循了标准的禁则(比如中文里头逗号不能出现在第一行的第一个字符)。使用中文字体并不会破坏这个特性,让优秀的设计可以在不同的设备完美的展现。
更多精彩的实例
以下三个实例均 fork 自 codepen.io,仅仅替换了其中的中文字体,想表达的就是中文字体确实让网页设计更加的有趣。
感谢
本站使用了 造字工房 的悦黑常规体, 和 新蒂黑板报体。
转载于:https://www.cnblogs.com/bluers/p/3532364.html
中文字体其实也可以用在网页上的相关推荐
- 利用sfntly的sfnttool.jar提取中文字体
雨忆博客中提到了sfntly(具体介绍可以看:https://code.google.com/p/sfntly/),利用其中sfnttool.jar就可以提取只包含指定字符的字体,如果想在页面中通过@ ...
- WEB中文字体应用指南
http://www.fontsquirrel.com/fontface @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现 ...
- Css中常用中文字体的Unicode编码对照
Css中常用中文字体的Unicode编码对照 在网页制作中,最常用的恐怕是字体属性了,在调整页面兼容的时候,也常常发现字体名称的原因导致不兼容或乱码,下面给出几种常用字体的ucicode编码对照,方便 ...
- 计算机中文字体的独创性,计算机中文字体中单字的著作权保护研究(2)
计算机中文字体中单字的著作权保护研究(2) 发布时间:2015-06-04 13:55点击率: 固然,计算机中文字由于自身结构和笔画顺序的限制,其设计空间较小,"独创性"也不如其他 ...
- 为Linux系统增加中文字体支持:解决显示问题的三种方法
Linux 增加中文字体支持 在使用 Linux 操作系统的过程中,用户经常会遇到中文字体显示问题,导致一些界面上的文字不能正确显示.为了解决这个问题,我们可以通过以下方法来增加中文字体支持. 一.安 ...
- [转] 中文字体网页开发指南
字体的选择,是网页开发的关键因素之一. 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响. 但是,相比英文字体,中文字体的网页开发有着极大的局限性.因为,一套中文字体最少也要有几千个字符,体积 ...
- 字蛛(FontSpider,中文字体压缩器)网页自由引入中文字体
之前看过设计师面试一位 Web 前端工程师,其中有一段这样的对话: "如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,这时候你怎么办?" &q ...
- Font-Spider 一个神奇的网页中文字体工具,就是这么任性
文章摘要: 1>> font-spider 字体神奇 由于活动项目推广的需要,页面需要用到一些漂亮好看的字体,example : 邯郸-韩鹏毛遂体.ttf. 方正喵呜.ttf 我看 ...
- 阮一峰 php,中文字体网页开发指南
字体的选择,是网页开发的关键因素之一. 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响. 但是,相比英文字体,中文字体的网页开发有着极大的局限性.因为,一套中文字体最少也要有几千个字符,体积 ...
最新文章
- 贸易保护主义不能解决德国光伏企业的问题
- 外观模式 - 设计模式学习
- Redis 深度历险:核心原理与应用实践
- SAP UI5 应用开发教程之十四 - 嵌入视图的使用方式
- JavaScript面向对象编程指南(五) 原型
- centos 获取硬件序列号_如何在 Linux 上查找硬件规格
- ftpwebrequest 无法加载或初始化请求的服务提供程序_jvm之类加载机制
- [react] 说说你对Error Boundaries的理解
- java aac rtp封装_分享一段H264视频和AAC音频的RTP封包代码
- 关于钥匙串中所有证书签名无效的问题解决纪录
- 【元胞自动机】基于matlab元胞自动机车流密度不变下的双向两车道仿真(T 字形路口)【含Matlab源码 1290期】
- 简述物联网感知技术_雄芯一号芯片发布 智慧城市物联网感知体系升级换新
- 保存为UTF8的1byte文字,2byte文字,3byte文字,4byte文字大全
- 装机大师无法发现linux硬盘,进入pe系统找不到硬盘的解决办法
- Spring中Junit测试启动报错class path resource [xxx.xml] cannot be opened because it does not exist
- 在Unity中使用键盘操作UI
- Windows7旗舰版SP1_64位2018.10(装机版)
- qq邮箱 服务器认证失败怎么回事,为什么我的QQ邮箱登录不了 QQ邮箱无法登陆怎么解决...
- 用计算机网络专业说一句情话,用你的专业,说一句情话!
- 毕业论文开题报告怎么写
热门文章
- 开源日志库log4cplus+VS2008使用整理
- css transition改动透明,使用CSS transition和animation改变渐变状态的实现方法
- php按城市显示搜索结果,在php错误中突出显示搜索结果
- unity串口 连接多个串口崩溃_3分钟全面了解串口服务器原理技术
- 泛函分析——步尚全老师第四章课后题答案往年题
- Python机器学习:梯度下降法003线性回归中的梯度下降法
- 华为全面屏鸿蒙,华为5G概念新机:真全面屏+鸿蒙OS 这才是旗舰手机
- java路由方法_Linux添加路由的方法
- 链式向前星(一个优秀的存储图的数据结构)
- 微信各地服务器如何同步,彻底搞清楚并实现多端同步登录