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博客

  • 相关阅读:
    JSON, String,Map,实体对象之间的转换
    使用mybatis-plus进行多表的条件查询(模糊查询)
    Netty整合WebSocket的使用
    Java流(stream)的使用
    mysql 查询当天、本周,本月,上一个月的数据......
    第七章 Centos7下Jira-8.16.1的安装
    第六章 JIRA基础介绍
    第五章 Confluence忘记密码
    第四章 Confluence服务的迁移
    第三章 Docker部署Confluence
  • 原文地址:https://www.cnblogs.com/wenbinjiang/p/11726443.html
Copyright © 2011-2022 走看看