中文WebFont探索
本文主要讲中文webFont的相关知识,包含了业界现状、WebFont优势、实现方案等。
一 业界使用WebFont现状
1.1 英文WebFont使用现状
英文版已使用非常广泛。比较有名的字体库:GoogleFonts :https://fonts.google.com/
1.2 中文WebFont使用现状
中文版字体库正在起步,目前各种图标使用已经很普遍了,例如华为云字体图标库。汉字库在部分大公司页面中有使用,效果还是很好的。例如:苹果、沃尔沃、汽车之家等。
案例1:苹果公司的pingfang字体,在window操作系统中没有集成,但是在windows中打开苹果中文官网,看到的字体效果还是一样,其使用的就是一套webfont字体。苹果官网地址:https://www.apple.com/cn/。
案例2:沃尔沃公司的中文官网用的是Volvo Sans Regular字体系列,实际也是webfont字体,是一套沃尔沃公司专门定制的webfonts。沃尔沃中文官网地址:https://www.volvocars.com/zh-cn。
注意:分析这两个网站webFont的实现方案,都是讲页面用的的中文字,全部转成对应的webFont,通过@fontFace功能实现。
二 业界中文字体库现状
2.1 目前中文字体库有不少,但只限于提供字体库,没有配套的web使用方法。例如:方正、汉仪。
2.2 目前做的比较好的webfont服务公司很少,其中有字库还不错,提供了字库服务:https://www.youziku.com/。
三 使用WebFont的好处
主要有三方面的好处:
3.1 视觉体验提升
好的webfont字体比目前使用的微软雅黑,在很多方面都有比较大的视觉提升。例如:思源(google和Adobe推出)、平黑等。
3.2 各个操作系统、PC端、移动端视觉体验一致性提升
使用webfont,可以确保mac、windows、Andorod等操作系统下字体显示效果都一致。而不是目前的:mac和ios手机是pingfang、widows是雅黑、Android手机是东青。
3.3 WebFont是业界趋势
英文版网站已大量采用WebFont;
苹果的移动端、PC端等字体都是统一的,体验效果很好;
好些大公司的网站都采用了WebFont。
四 使用中文WebFont需要解决的问题
需要解决两个核心问题:
4.1 中文字体库来源
有两种方式:使用已有的字体类型(方正、思源);开发一套自己的字体库。
4.2 如何应用到页面中
中文字非常多(基础字库6000个),不可能一次性将所有字的源文件加载到页面中,只能是按需加载。这样又存在大量问题:如何实现按需加载、各个页面需要适配。
五 业界使用中文webFont的方案
主要有两种使用方案:
方案一: 手动将页面用到所有与汉字转换为webFont。
只适用于静态页面。工作量大,页面内容变更后需要手动补充新增汉字的webfont。
方案二:采用字体服务,动态实现汉字webFont化。
采用国内目前做的比较好的webFont的字体服务(https://www.youziku.com/)。
有三种使用场景和方式:
JS方式:解决静态页面场景,例如官网;
编辑器方式:解决表单提交等东西数据场景;
后端方式:解决后端大量数据场景。
参考资料&内容来源:
有字库:https://www.youziku.com/help/MF95ems.html
博客园:https://www.cnblogs.com/best/p/6132612.html
W3ctech:https://www.w3ctech.com/topic/669
中文WebFont探索的更多相关文章
- 中文WebFont解决方案Font-Spider(字蛛)
我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题,我们通常以下方式来进行设计还原: ...
- 深度学习实战篇-基于RNN的中文分词探索
深度学习实战篇-基于RNN的中文分词探索 近年来,深度学习在人工智能的多个领域取得了显著成绩.微软使用的152层深度神经网络在ImageNet的比赛上斩获多项第一,同时在图像识别中超过了人类的识别水平 ...
- 您的下个中文网站可以使用的5个高质量中文Webfont
你有没有考虑为什么中文网站的版式风格不像大多数现代英文网站那样丰富?您想了解如何让您的下一个中文网站项目更吸引用户的眼球么?继续往下读吧…… 根据Smashing Magazine进行的一项调查显示 ...
- 中文web font技术及方案
我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题,我们通常以下方式来进行设计还原: ...
- web设计经验<七>13步打造优雅的WEB字体
今天,大多数浏览器已经默认支持Web字体,日趋增多的字体特性被嵌入最新版HTML和CSS标准中,Web字体即将迎来一个趋于复杂的崭新时代.下面是一些基本的关于字体的规则,特别适用于Web字体. 原文地 ...
- CSS3 基本知识
1.CSS3 简介 CSS 指层叠样式表 (Cascading Style Sheets),用于控制网页的样式和布局,CSS3 是最新的 CSS 标准. 在网页制作时采用层叠样式表,可以有效的对页面的 ...
- Web字体工具整理,网页图标字体以及使用方法整理
常用网站app logo 下载: http://www.iconfont.cn/collections/show/268?spm=a313x.7781069.0.0.nDYawz 1.Web字体免费生 ...
- Jetbrains CLion 安装及配置详解
# Hi 今天呢就给大家推荐一个高大上 强大智能的 C/C++语言编辑器.ta的名字叫-- Jetbrains CLion (呃,说好了不用标题字呢) 这个编辑器呢主要支持C和C ++,包括现代C + ...
- 苹果电脑不安装flash的话怎么看直播
直播这种娱乐方式的兴起,让很多游戏玩家.脱口秀演员.歌手等拥有了一个更加宽广的舞台,可以更好地展现自己的才能.大部分的直播都是采取视频影像的方式直播,只有少部分才会采用纯音频的方式. 由于很多直播网站 ...
随机推荐
- Enter Query Mode Search Tricks Using Enter_Query Built-in in Oracle Forms
In this post you will learn how to specify any condition in enter query mode of Oracle Forms. Whenev ...
- 关于Sending build context to Docker daemon 数据很大的问题
以往进行docker build的时候都是在新建的文件夹下面进行,这次为了图方便,就直接放在开发根目录下进行build,这样子问题就来了.于是就有了下面的文件大小发送量: Sending build ...
- SVN环境搭建详解
SVN服务器搭建和使用(一) Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网 ...
- VS2010中打开VS2012项目的方法
VS2012中对C#的支持度非常好,不管是编写方便程度(不需要插件就能高亮代码及代码自动提示功能),还对MFC的一些功能优化很多. 修改两个工程文件就把VS2012的项目移植到VS2010中去的方法如 ...
- 修改Linux基本配置
1.修改主机名 vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=server1.cn 2.修改ip地址 vi /etc/sysconfig/netw ...
- TensorFlow笔记六:基于cifar10数据库的AlexNet识别
准确率只有70%,cpu版本的TF居然跑了两天才跑完,其他方法将继续尝试. 生成数据目录: import numpy as np import os train_label = {} for i in ...
- 转:java的各个拓展类库的推荐方案
from: 链接:https://www.zhihu.com/question/21142149/answer/109854408 Java是世界上最强大的编程语言之一,很多开发人员和大型企业都偏爱J ...
- Java面向对象编程(二)
上一篇博文里总结了面向对象三大特性在Java中的体现.如今谈一谈Java中的抽象类,接口,内部类等特性. 一. 抽象类 public abstract class Shape { public int ...
- TCP/IP详解 卷一(第三章 IP:网际协议)
IP是TCP/IP协议族中最为核心的协议.所有的TCP.UDP.ICMP及IGMP数据都以IP数据报格式传输. IP提供不可靠.无连接的数据报传送服务. 1.不可靠:就是它不能保证IP数据报能成功地到 ...
- 文件I/O操作为什么叫输入/出流
参考以下文档: http://blog.csdn.net/hguisu/article/details/7418161 我们关注的焦点是错误的,重点不在文件,我们关注的核心是数据流. 这种流可以是文本 ...