zoukankan      html  css  js  c++  java
  • 耐人寻味的CSS属性font-family

    font-family是一个网站用户体验的第一入口,非常有必要花功夫来研究一下。我们首先需要了解衬线字体和无衬线字体,接着了解中英文的常用字体及其适用性。

    衬线字体

    衬线(serif)的笔画有粗有细的变化,在每一笔画上都自有风格,笔画末端会有修饰,强调艺术感,适合用于博客,旅游,文化,艺术类网站。

    无衬线字体

    无衬线(sans-serif)的字体工整方正,给人正式的感觉,适合政务类,企业类网站使用。

    中文字体

    Windows

    • simsun,宋体,也是windows下大部分浏览器的默认字体,font-size较大时清晰度不佳。
    • Microsoft Yahei,无衬线字体,微软雅黑,是微软委托中国方正设计的一款中文字体。

    Mac OS

    • STHeiti,华文黑体,OS X 10.6之前的简体中文系统界面默认字体,也是目前Chrome游览器下的默认字体。
    • STXihei,华文细黑,比STHeiti文字更细。
    • Heiti SC,黑体-简,从 OS X 10.6 开始,黑体-简代替华文黑体用作简体中文系统界面默认字体,显示效果不错,但是喇叭口设计遭人诟病。
    • Hiragino Sans GB,冬青黑体,清新的专业印刷字体,小字号时足够清晰,拥有很多人的追捧。
    • PingFang SC,苹方,在Mac OS X EL Capitan上,苹果为中国用户打造,去掉了为人诟病的喇叭口。

    Linux

    • WenQuanYi Micro Hei,文泉驿微米黑,Linux最佳简体中文字体。

    英文字体

    Windows

    • Arial,无衬线西文字体,显示效果一般。
    • Tahoma,无衬线字体,显示效果比Arial要好。
    • Verdana,无衬线字体,优点在于它在小字上仍结构清晰端整、阅读辨识容易。

    Mac OS

    • Times New Roman,衬线字体,Mac平台Safari下默认的字体。
    • HelveticaHelvetica Neue,被广泛使用。
    • San Francisco,与苹方一样,mac os最新的西文字体。

    font-family设置原则

    • 西文优先:西文字体中大多不包含中文,西文优先,中文紧随其后,这样就不会影响到中文字体的选择。
    • 从新到旧:优先体验最好的字体,向下兼容。
    • 兼容多种操作系统:考虑windows, mac os, android, linux等系统。
    • 补充字体族:最后根据衬线serif或无衬线sans-serif来补充字体族,当所有设置的字体都找不到时,让操作系统有选择字体的方向。

    font-family推荐

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

    首发链接


    扫一扫下方小程序码或搜索Tusi博客,即刻阅读最新文章!

    Tusi博客

  • 相关阅读:
    document.getElementById()使用方法
    Delphi XE7 发布时间
    JavaScript动态更改页面元素
    TCP/IP-协议族----17、应用层简单
    查看员工信息每个部门的最低工资
    VB6.0“挑衅”.NET!
    MapReduce计数器
    Linux学习记录--命名管道通信
    cocos2d-x V3.0 呼叫加速度计 Acceleration
    Linux Kernel(Android) 加密算法汇总(四)-应用程序调用OpenSSL加密演算法
  • 原文地址:https://www.cnblogs.com/wenbinjiang/p/11726443.html
Copyright © 2011-2022 走看看