zoukankan      html  css  js  c++  java
  • 如何优雅的选择字体(font-family)

    基础知识

    serif和sans-serif字体之间的区别

    西文字体分为两大族:衬线体(serif)和无衬线体(sans-serif)。像Times、Times New Roman等都是属于衬线体,而Arial、helvetica则是属于无衬线体。

    衬线字体,意思是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。
    无衬线体是无衬线字体,没有这些额外的装饰,而且笔画的粗细差不多。

    在计算机屏幕上,sans-serif字体被认为是比serif字体容易阅读。

    字体系列

    ont-family 属性设置文本的字体系列。

    font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。

    注意:

    名称包含空格,则需要用双引号或单引号表示,如:

    font-family: "Microsoft YaHei", "Arial Narrow", sans-serif;

    中文字体名称为了保证兼容性也会添加引号,如:

    font-family: "黑体-简", "微软雅黑", "文泉驿微米黑";

    一、各平台的默认字体情况

    1、Window下:

    • 宋体(SimSun):Win下大部分游览器的默认字体,宋体在小字号下(如12px、14px)的显示效果还可以接受,但是字号一大就非常糟糕了,所以使用的时候要注意。

    • 微软雅黑("Microsoft Yahei"):从 Vista 开始,微软提供了这款新的字体,一款无衬线的黑体类字体,并且拥有 RegularBold 两种粗细的字重,显著提高了字体的显示效果。现在这款字体已经成为Windows游览器中最值得使用的中文字体。从Win8开始,微软雅黑又加入了 Light 这款更细的字重,对于喜欢细字体的设计、开发人员又多了一个新的选择。

    • Arial:Win平台上默认的无衬线西文字体(为什么要说英文字体后面会解释),有多种变体,显示效果一般。

    • Tahoma:十分常见的无衬线字体,被采用为Windows 2000、Windows XP、Windows Server 2003及Sega游戏主机Dreamcast等系统的预设字型,显示效果比Arial要好。

    • Verdana:无衬线字体,优点在于它在小字上仍结构清晰端整、阅读辨识容易。

    • 其他:Windows 下默认字体列表:微软官网维基百科Office字体

    • 结论:微软雅黑为Win平台上最值得选择的中文字体,但非游览器默认,需要设置;西文字体的选择以ArialTahoma等无衬线字体为主。

    2、Mac OS下:

    • 华文黑体(STHeiti)、华文细黑(STXihei):属于同一字体家族系列,OS X 10.6 之前的简体中文系统界面默认字体,也是目前Chrome游览器下的默认字体,有 Regular 和 Bold 两个字重,显示效果可以接受,华文细黑也曾是我最喜欢的字体之一。

    • 黑体-简(Heiti SC):从 10.6 开始,黑体-简代替华文黑体用作简体中文系统界面默认字体,苹果生态最常用的字体之一,包括iPhone、iPad等设备用的也是这款字体,显示效果不错,但是喇叭口设计遭人诟病。

    • 冬青黑体( Hiragino Sans GB ):听说又叫苹果丽黑,日文字体Hiragino KakuGothic的简体中文版,简体中文有 常规体 和 粗体 两种,冬青黑体是一款清新的专业印刷字体,小字号时足够清晰,拥有很多人的追捧。

    • Times New Roman:Mac平台Safari下默认的字体,是最常见且广为人知的西文衬线字体之一,众多网页浏览器和文字处理软件都是用它作为默认字体。

    • Helvetica、Helvetica Neue:一种被广泛使用的传奇般的西文字体(这货还有专门的记录片呢),在微软使用山寨货的Arial时,乔布斯却花费重金获得了Helvetica苹果系统上的使用权,因此该字体也一直伴随着苹果用户,是苹果生态中最常用的西文字体。Helvetica NeueHelvetica的改善版本,且增加了更多不同粗细与宽度的字形,共拥有51种字体版本,极大的满足了日常的使用。

    • 苹方(PingFang SC):在Mac OS X EL Capitan上,苹果为中国用户打造了一款全新中文字体--苹方,去掉了为人诟病的喇叭口,整体造型看上去更加简洁,字族共六枚字体:极细体、纤细体、细体、常规体、中黑体、中粗体

    • San Francisco:同样是Mac OS X EL Capitan上最新发布的西文字体,感觉和Helvetica看上去差别不大,目前已经应用在Mac OS 10.11+、iOS 9.0+、watch OS等最新系统上。

    • 其他:Mac下默认字体列表:苹果官网维基百科

    • 结论:目前苹方San Francisco为苹果推出的最新字体,显示效果也最为优雅,但只有最新系统才能支持,而黑体-简Helvetica可以获得更多系统版本支持,显示效果也相差无几,可以接受。

    3、Android系统:

    • Droid Sans、Droid Sans FallbackDroid Sans为安卓系统中默认的西文字体,是一款人文主义无衬线字体,而Droid Sans Fallback则是包含汉字、日文假名、韩文的文字扩展支持。

    • 结论:Droid Sans为默认的字体,并结合了中英文,无需单独设置。

    4、iOS系统:

    • iOS系统的字体和Mac OS系统的字体相同,保证了Mac上的字体效果,iOS设备就没有太大问题。

    5、Linux:

    • 文泉驿点阵宋体:类似宋体的衬线字体,一般不推荐使用。

    • 文泉驿微米黑:几乎是 Linux 社区现有的最佳简体中文字体。

    二、选择字体需要注意的问题

    1、使用英文名

    常看到宋体微软雅黑这样的字体名称,但这并不是字体文件的名称,一般字体文件都是用英文命名的,如SimSunMicrosoft Yahei

    在大多数情况下直接使用名称也能正确显示,但是有一些用户的特殊设置会导致中文声明无效。

    因此,保守的做法是使用英文名称或者两者兼写。如下示例:

    font-family: STXihei, "Microsoft YaHei";
    font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";

    2、声明英文字体

    绝大部分中文字体里都包含英文字母和数字,但是都不是特别漂亮,所以建议也对英文字体进行声明。

    由于英文字体中大多不包含中文,我们可以先进行英文字体的声明,这样不会影响到中文字体的选择。

    因此优先使用最优秀的英文字体,中文字体声明则紧随其次。如下示例:

    font-family: Arial, "Microsoft YaHei";

    3、照顾不同的操作系统

    • 英文、数字部分:在默认的操作系统中,Mac和Win都会带有ArialVerdanaTahoma等几个预装字体,从显示效果来看,Tahoma要比Arial更加清晰一些,因此字体设置Tahoma最好放到前面,当找不到Tahoma时再使用Arial;而在Mac中,还拥有一款更加漂亮的Helvetica字体,所以为了照顾Mac用户有更好的体验,应该更优先设置Helvetica字体;Android系统下默认的无衬线字体就可以接受,因此无需单独设置。
    font-family: Helvetica, Tahoma, Arial;
    • 中文部分:在Win下,微软雅黑为大部分人最常使用的中文字体,由于很多人安装Office的缘故,Mac电脑中也会出现微软雅黑字体,因此把显示效果不错的微软雅黑加入到字体列表是个不错的选择;同样,为了保证Mac中更为优雅字体苹方(PingFang SC)黑体-简(Heiti SC)冬青黑体( Hiragino Sans GB )的优先显示,需要把这些字体放到中文字体列表的最前面;同时为了照顾到Linux操作系统的体验,还需要添加文泉驿微米黑字体。
    font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";

    中英文整合写法:

    font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";

    4、注意向下兼容性

    如果还需要考虑旧版本操作系统用户的话,不得不加上一些旧版操作系统存在的字体:Mac中的华文黑体冬青黑体,Win中的黑体等。同样按照显示效果排列在列表后面,写法如下:

    font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei";

    加入了 STXihei(华文细黑) SimHei(黑体)

    5、补充字体族名称

    字体族大体上分为两类:sans-serif(无衬线体)serif(衬线体),当所有的字体都找不到时,我们可以使用字体族名称作为操作系统最后选择字体的方向。一般非衬线字体在显示器中的显示效果会比较好,因此我们需要在最后添加 sans-serif ,写法如下:

    font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

    三、最后

    推荐,个人的常用写法:

    font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

    参考链接:

    1. https://segmentfault.com/a/1190000006110417

    2. https://www.runoob.com/css/css-font.html

  • 相关阅读:
    使用 Spring data redis 结合 Spring cache 缓存数据配置
    Spring Web Flow 笔记
    Linux 定时实行一次任务命令
    css js 优化工具
    arch Failed to load module "intel"
    go 冒泡排序
    go (break goto continue)
    VirtualBox,Kernel driver not installed (rc=-1908)
    go运算符
    go iota
  • 原文地址:https://www.cnblogs.com/lfri/p/11776320.html
Copyright © 2011-2022 走看看