详细解析跨平台字体效果使用浅析

2016-02-17 00:39 6 1 收藏

下面这个详细解析跨平台字体效果使用浅析教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

【 tulaoshi.com - 平面设计 】

在对设计稿视觉还原的过程中,经常会产生一些字体还原的问题。

例如对一些大号文字还原后,实际视觉效果有逊于在photoshop上的效果;在Mac上的设计稿还原后,明明用的还是宋体和黑体,但是还原后字型相距较大;而在Windows做好的网页在Mac上看起来字体也有点异样。

这篇文章主要对字体作了一些探讨,主要内容分为两部分:

一、字体可用性分析

二、字体实际展示效果分析

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

结论

由于文章较长,结论先行:

1. Mac & Windows公有可用英文及数字字体有:Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact Times New Roman, Trebuchet MS,

Verdana

Windows下可用中文字体有(中易)宋体,新宋体,仿宋体,黑体,楷体,微软雅黑(部分系统适用)。

Mac下可用中文字体有(华文)宋体,仿宋体,华文黑体,华文细黑,华文楷体。

在Mac下网页的字体设置,参考了Apple官网的做法,可使用华文黑体,保持与Mac本身系统字体的一致性。

2. 对于微软雅黑,以操作系统计算,覆盖率仅为不到30%,未安装该字体的用户可使用宋体或黑体替代,有必要的话可考虑指定替代字体。

3. 在Mac中,未针对Mac做Mac字体设置的话,网页字体会按一定规则转成Mac下的字体。

4. 正文12px字体建议使用宋体。12-17px宋体比微软雅黑要清晰。

一、字体可用性分析

A. 中文字体:

值得注意的是,mac下以及windows下没有公用的中文字体(相关详细对比后续讨论)

具体预装简体中文字体列表如下:

详细解析跨平台字体效果使用浅析,PS教程,图老师教程网

【关于微软雅黑的覆盖率】

据统计,近期win7+vista的市场份额之和约在25%左右浮动,此部分用户内置微软雅黑,而对于没有主动安装微软雅黑的XP-的用户,在页面中使用微软雅黑时,文字将使用宋体替代。

B. 英文字体:

据统计(http://media.24ways.org/2007/17/fontmatrix.html),mac以及windows通用的公有字体有:

详细解析跨平台字体效果使用浅析,PS教程,图老师教程网

当页面使用到活字的时候,可联系设计师尽量使用以上中英文字体。使用这些字体可避免使用图片,降低用户加载时的带宽成本,提升页面的加载速度。

二、字体实际展示效果分析

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

A. Photoshop设计效果 vs Web实际展示效果

详细解析跨平台字体效果使用浅析,PS教程,图老师教程网

微软提供了名为Cleartype的字体平滑技术,但是在XP下,cleartype是默认关闭的。所以在vista以及vista以上系统中,相比于XP,字体渲染更平滑。而Mac Os X中,字体渲染更为饱满,边缘更模糊,视觉上会显得更粗一些。

总体来说:

Mac OS X 的字体渲染强调忠实字体设计,最大化保留字体的外形。边缘平滑是为了更好地传递字体设计中的曲线等细节,而在这种方针下,有可能引起小字号时的模糊。

而 Windows 的字体渲染强调文字的锐利和清晰。在操作系统介面和网页正文等小字号的地方比较清晰,但大幅牺牲字体的原貌。

节选自http://www.zhihu.com/question/19573048

如希望获得更多关于字体渲染的信息,可阅览http://blog.typekit.com/2010/10/15/type-rendering-operating-systems/

B. 在Mac中,字体的差异性

在Mac中,字体的差异性主要体现在中文上。

基于Mac的设计稿Windows并不能重现Mac下的字体效果

一些设计师可能会使用Mac进行设计,但是会发现Mac设计出来的页面在还原之后,字体的视觉差异较大,

这是因为Mac下的宋体以及Windows下的宋体,Mac下的黑体以及Windows下的黑体是不同的。

Windows系统下,其宋体=中易宋体,黑体=中易黑体

Mac系统下,其宋体=华文宋体,而黑体=华文黑体,而实际华文黑体的非加粗,加粗分别来自原有的华文细黑和华文黑体。

具体对比如下:

详细解析跨平台字体效果使用浅析,PS教程,图老师教程网

所以,在Mac下设计时,请注意Windows下字体效果与Mac下的字体效果是不同的,随之,把设计还原成网页后,字体效果自然会和设计稿有一定差距。

用Mac访问针于Windows的网页Mac将使用自己的字体替代

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

在页面还原中,可以手动设置网页在Mac下使用某种Mac平台下的字体,若不设置的话,将使用浏览器偏好设置中的默认字体,

Mac下的Safari默认使用华文宋体,Chrome默认使用华文黑体。如下图所示:

详细解析跨平台字体效果使用浅析,PS教程,图老师教程网

在 Web 上的字体,如果设置了英文字体,将会影响到对应的中文默认字体。

如果默认字体是非衬线字体例如 Arial, Verdana, Trebuchet, Impact,中文字体自动是选用非衬线字体华文黑体。(使用Impact的时候会加粗)

如果默认字体是衬线字体例如 Georgia, Times New Roman,那么中文字体就会自动选成衬线字体华文宋体。

一般mac上会按这个规则选择字体,但是经过测试,特殊的是,

Courier New=华文黑体

Comic Sans MS=华文楷体

详细解析跨平台字体效果使用浅析,PS教程,图老师教程网

具体显示逻辑如下:

详细解析跨平台字体效果使用浅析,PS教程,图老师教程网

对于不同的浏览器,在Mac中实际展示效果如下,

详细解析跨平台字体效果使用浅析,PS教程,图老师教程网

在实测我们可以发现,在Chrome下华文宋体并不能正常加粗。

C. 关于使用13px、15px、17px的宋体

Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px 时用的是小一号的点阵(即每个字占的空间大了 1 px,但点阵没变) 。

详细解析跨平台字体效果使用浅析,PS教程,图老师教程网

对于13、15、17px的宋体,其大小与其小一号一样,只是间距多了1px。

所以在Photoshop中所使用的13、15、17px宋体并不能在web上正常还原,设计时应避免使用13、15、17px的宋体。

D. 具体字体展示效果一览

中文篇:

详细解析跨平台字体效果使用浅析,PS教程,图老师教程网

测试字号:12、13、14、16、18、24、30、36px

其中可看到,

1. 黑体字的锯齿比较严重,

2. 在字号较小时,仿宋体以及楷体在不加粗的情况下效果较差。

3. 小字体中,宋体比微软雅黑要清晰,

(因为宋体在12-17px的时候使用的是点阵表示,小于12px及大于17px之后将由字体轮廓栅格化。

即,12-17px显示【点阵】,小于12px及大于17px显示【轮廓】

而微软雅黑只提供【轮廓】,在字体较小的时候会显得不清晰,所以对于正文建议使用宋体。)

英文篇:

详细解析跨平台字体效果使用浅析,PS教程,图老师教程网

根据以上图标可以看出不同字体在不同字号不同粗细下的展示效果。

如有需要请对比实际效果使用。

结语

在网页构建中,字体可能是很容易被忽略的一个点。在设计的时候,很自然会认为在photoshop中选了某个字体,在web中选择对应的字体,就会有对应的效果。

但是实际往往会产生一定的差异性,尤其是在跨平台的情况下,差异性更加明显。

这样的现象会导致视觉还原的结果与预期不同。引起往返修改,甚至产生远低于预期的情况。

所以为了更好地保证实际产品的视觉质量,字体也是一个不可忽略的切入点。

参考资料:

http://www.zhihu.com/question/19573048 Mac 上的字体渲染和 Windows 的有什么区别

http://www.zhihu.com/question/20440679现在网页设计中的为什么少有人用 11px、13px、15px 等奇数的字体

http://techsingular.net/?p=164 Mac OS X的字体

http://ucdchina.com/snap/12274 Mac Win网页字体显示方案

http://www.pjhome.net/article/Web/mac_os_fonts.htm关于MacOS下字体的一些研究

http://dancewithnet.com/2009/11/22/default-web-font-style/ 默认Web字体样式

http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/

来源:http://www.tulaoshi.com/n/20160217/1576923.html

延伸阅读
Runtastic 5.0 最好的跨平台跑步应用   我们喜欢慢跑这种锻炼方式,但从某种程度来说,跑步是单调且累人的,所以你需要一些辅助工具来帮助自己实现更好的体验。除了运动腕带,一些便宜的应用也能够实现类似效果,比如支持iOS及Android平台的Runtastic。这款应用最近升级到了5.0新版本,拥有一些新的特性,下面一起来了解一下。 ...
iOS9正式发布之后,对于新字体的争议就没有停止过。最早出现在Apple Watch 上的苹果字体San Francisco ,替换了之前的Helvetica Neue成为了iPhone/iPad系列设备的默认字体。而目前还处于测试阶段的Mac新系统El Capitan 也同样讲它设为默认字体。 坦率的讲,苹果从来都是有自主开发字体的传统,iOS7/8作为一个新的系统,研发周期上捉襟见肘...
标签: Java JAVA基础
---摘自《计算机世界日报》(文/黄剑) ---- 使用Java语言编写应用程序最大的优点在于“一次编译,处处运行”,然而这并不是说所有的Java程序都具有跨平台的特性,事实上,相当一部分的Java程序是不能在别的操作系统上正确运行的,那么如何才能编写一个真正的跨平台的Java程序呢?下面是在编写跨平台的Java程序是需要注意的一些事情: ---- 1...
第一印象通常就是一种持续印象。不管你是否意识到,你的版式能够帮助用户在他们甚至还没有开始读一个字或者点击一个按钮之前建立一个体验。版式不仅仅是讲述一个故事,它告诉用户是这个网站的幕后以及这个背后的人是做什么的。对于字体的处理创造了一种氛围,同时也会像声音的音调一样击起长久的回想。 你需要问一问你自己,你想要表达什么以...
对于很多新手来说,选择字体是个烦恼的过程。从正规传统的字体到神奇的小拐棍儿字,体还有复活节小兔子字体,似乎有着无法掌握的无穷无尽的选择,而且有永无止境的列表和推荐。其实选择合适的字体是一项综合原则和感觉的活动,这需要多年的经验去实现,本文就描述了运用字体的五个原则。 1.穿着场合 很多我的新学生会像选择新的音乐一样去选...

经验教程

922

收藏

40
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部