你有没有考虑为什么中文网站的版式风格不像大多数现代英文网站那样丰富?您想了解如何让您的下一个中文网站项目更吸引用户的眼球么?继续往下读吧……

根据Smashing Magazine进行的一项调查显示 ,大多数网站在2013年已采用非标准字体作为主要字体,这表明网站版式风格的多样性和自由度正在日益增长。随着Google Web Fonts,Typekit和许多其它稳定且易于部署的webfont服务的出现,网页设计师已不再为是否使用了web-safe(网页-安全 指恰到好处而不让人觉得突兀)的字体而担心。然而,在讲汉语的世界里,网页设计师没有那么奢侈的便利条件。

中文网站排版面临的挑战

中文字符集很庞大。标准的中文字符集由大约10,000个单独字符组成,常用的只有3,000个字符。由于有庞大的字符集,中文字体文件单个大小可以达到5到10 MB。由于这个原因,除非您的网站用户具有超快的网速,否则使用CSS @ font-face的嵌入方式是不可行的。很长一段时间,人们只使用所谓“网页安全”(注:意思同上文)的中文字体,它们是:

  • 宋体(Song Ti),大多数旧网站使用有衬线体(serif)字体。
  • 黑体(Hei Ti),一种类似“Helvetica”的有衬线体(serif)字体。
  • 幼圆(You Yuan),类似comic-sans(一种Windows系统字体)一样的圆形字体,但并没有像它那样臭名昭著。
  • 隶书(Li Shu),一种毛笔字。
  • 微软雅黑(Microsoft Ya Hei sans-serif(无衬线体)),可以说是最时尚的中文网页安全字体。从Vista开始,它就出现在了Windows系统中。(注:下文直接用serif和sans-serif,这两种字体的区别具体参考百度百科

对于Mac OSX用户而言,也有一个不错的选择:苹果丽黑(Hiragino Sans GB).它是一种高质量sans-serif字体类似于Windows上的微软雅黑(Microsoft Ya Hei sans-serif)。

“苹果丽黑(Hiragino Sans GB)”,现在被认为是网上最优质的中文sans-serif 字体(仅适用于Mac)。

通常在实践中较好的做法是不在body的css中指定任何中文字体样式,而只指定charset =“utf-8”。这样做就可以让浏览器选择可用的最佳字体来展示页面从而获得最好的页面可读性。

然而,中文版式的确有更为广泛的风格多样性。纵观中国历史,中文书面语言的基本构件随着时间的推移而在不断发展。一般来说,汉字风格可以大约分为12种不同的风格,从象征自然物和动物的古代神谕到现代sans-serif汉字。目前,在汉语世界的不同地区使用了两套不同的汉字 - 简体中文和繁体中文。

“黑体“,一种类似于sans-serif印刷风格的字体

从事中文网站项目的设计师通常希望他们可以从更广泛的网页字体中进行选择,以实现他们的创意追求。这种需求为中文字体提供商创造了开发新技术以解决问题的机会。

新技术使中文网页字体更加实用

虽然以稳定和带宽友好的方式提供中文网页字体仍然是一项技术挑战,但是有一些有为的中文网页字体提供商利用创新技术已经使其更切实际。大多数这些提供商采用的技术是使用JavaScript代码块来收集当前网页所需的所有字符,并自动下载压缩后的字体文件。这样,只有需要的字符才会被下载下来,从而将字体文件缩小到合理的大小。

JustFont

JustFont是一种针对中文字体的Typekit-esque服务。它有一个不错的繁体中文字符的字体库,但只有一组有限的简体字符集。

DYNAFont

DYNAFont是一家知名的中文字体制作公司,一直在不断的生产高质量的中文字体。其网站上列出的所有字体均由该公司制作。如果您特别希望在web上使用DYNA字体,那么请点击上面的链接。

YouZiKu

使用YouZiKu,您可以上传自己的字体文件并将可以其转换为指定字符集风格的定制webfont文件。它还有多种字体可供选择。

iFontCloud

iFontCloud拥有大量的繁体中文字体风格。如果您正在设计一个主要针对中国传统读者的中文网站,iFontCloud可以派上用场,让您的网站脱颖而出。

Fonts.com

fonts.com也有一组中文webfonts。但是,与上述服务不同,fonts.com没有采用预过滤功能来减少字体文件大小,通常字体文件大约为2~4MB。因此,它不适合那些以网络速度较慢的在线用户为目标的网站。

结论

虽然这些技术允许设计人员和Web开发人员从更广泛的字体中进行选择,但仍然建议小规模地使用该技术,这意味着它应该仅用于短拷贝文本而不应该用于长时间运行的正文文本,因为正文文本有更大的不同种类的字符集合。大字体文件仍将显著影响页面加载性能。

P.S. Kendra Schaefer撰写了一篇关于中文网页字体的非常全面的文章。你可以在这里阅读。

更新:Smashing Magazine也发布了一篇关于中文网页设计趋势的文章,你可以在这里查看 。

您的下个中文网站可以使用的5个高质量中文Webfont的更多相关文章

  1. Casperjs/PhantomJs 中文网站截图乱码

    使用CasperJs进行自动化测试中文网站的时候发现中文网站截图会出现乱码的现象,中文汉字被一个个小方框代替 查找了一些资料发现是因为Linux服务器上没有安装中文字体导致的,Linux如何安装中文字 ...

  2. 推荐两个Magento做的中文网站 GAP和佰草集

    Magento这两年发展很快,可以算是现阶段最有前途的开源电子商务系统,国外用的人很多,相对应的,国内也已经有很多人在用Magento建站了,可惜的是这其中绝大多数还是英文站,大多是国内外贸商建的外贸 ...

  3. [myeclipse] 官方中文网站

    myeclipse官方中文网站:http://www.myeclipsecn.com/

  4. linux下的php网站放到Windows服务器IIS下导入 .htaccess文件伪静态规则转换 (wordpress)

    需要特别注意的是: 1. .htacdess文件在 wordpress中 是可以生成的 安装 WP Super Cache后,开启该插件>>设置>>高级>>找到并点 ...

  5. linux下的php网站放到Windows服务器IIS下.htaccess文件伪静态规则转换

    此办法只适合于linux下的php网站放到Windows服务器IIS下 ,  网站除了主页面正常以外  子页面全部出现404错误    这里子页面出现404 错误是说明伪静态没有开启 什么是.htac ...

  6. eclipse下java中凝视字体太小和xml中中文字体太小问题解决方法

    我们在win7下进行android应用开发.须要搭建对应的开发环境.如今普遍基本上都是eclipse+adt+sdk,在本人搭建完环境后,发现eclipse下.java中的凝视和xml中的中文字体变得 ...

  7. Web信息架构:设计大型网站(第3版) [美]Peter Morville 中文PDF扫描版

    新版Web信息架构设计大型网站针对新技术做了全面更新——搭配新颖范例.全新场景及最佳实践信息——但是,其焦点依然放在基础原理上.其结构严谨,图文并貌,内容涵盖了信息架构基本原理和实践应用的方方面面. ...

  8. Web Server 在iis下部署php网站在iis下

    Web Server  在iis下部署php网站在iis下 一.参考地址: windows8 http://www.cnblogs.com/haocool/archive/2012/10/14/win ...

  9. Web Server 在iis下部署asp网站在iis下

    Web Server 在iis下部署asp网站在iis下 一.参考地址: win7 http://jingyan.baidu.com/article/636f38bb1bbcadd6b846108b. ...

随机推荐

  1. 数据库——MySQL——索引

    索引的功能就是加速查找,MySQL中的primary key,unique,联合唯一也都是索引,只是这些索引除了加速查找以外,还有约束功能. 一般的应用系统,读写比例在10:1左右,而且插入操作和一般 ...

  2. Jquery中on绑定事件 点击一次 执行多次 的解决办法

    举个例子,在同一个页面有下拉选择框 <select class="mySelect"> <option value="user">按用户 ...

  3. fis3 安装(Linux)

    Linux安装fis3 1,首先安装node环境 https://segmentfault.com/a/1190000004245357 2,安装fis3 http://blog.csdn.net/g ...

  4. 闲谈Hybrid

    前言 当经常需要更换样式,产品迭代,那么我们应该考虑hybrid混合开发,上层使用Html&Css&JS做业务开发,底层透明化.上层多多样化,这种场景非常有利于前端介入,非常适合业务快 ...

  5. 关于端口冲突的解决方式Error: listen EACCES 0.0.0.80

    笔者昨天下午临走前安装了vs 2017想要运行一下项目的NET后端来让本机的前端直接对接后端,但是没注意到运行vs后IIS直接占用了本机的80端口.第二天跑nodeJS的时候直接Error: list ...

  6. Hbase 表的Rowkey设计避免数据热点

    一.案例分析 常见避免数据热点问题的处理方式有:加盐.哈希.反转等方法结合预分区使用. 由于目前原数据第一字段为时间戳形式,第二字段为电话号码,直接存储容易引起热点问题,通过加随机列.组合时间戳.字段 ...

  7. hadoop学习笔记——zookeeper平台搭建

    zookeeper是一个自动管理分布式集群的一个工具,以实现集群的高可用. 比如集群中的一个机器挂掉了,没有zookeeper的话就得考虑挂一个机器对剩下集群工作的影响,而有了zookeeper,它就 ...

  8. Learning Experience of Big Data: Deploying Tomcat 8.0 and connect ssh without password

    This mission seems to be easier--we can just decompression Tomcat to our virtural machine and deploy ...

  9. Python2018秋招(笔者亲身经历)

    毕业即失业,苦逼的大四狗伤不起哟. 又到了一年一度的秋招了,笔者也在拉勾,智联,boss直聘注册了,投了50份简历,3个面试,然而全挂了. 笔者痛定思痛决定将自己的经历贴出,希望可以帮到要面试的同学. ...

  10. python基础 抽象类(接口类)

    Python中没有接口.接口类,抽象类:定义 制定一个规范 #必须要导入from abc import ABCMeta,abstractmethod class Payment(metaclass = ...