我们知道,不同的操作系统,不同的浏览器,页面字体的显示和渲染存在差异.

那么如何设置font-family,能够使字体在不同的环境下,也拥有好的展示效果?

1.操作系统中字体默认的字体

windows:

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

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

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

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

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

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

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

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可以获得更多系统版本支持,显示效果也相差无几,可以接受。

详细的资料可参考连接--如何优雅的选择字体

因此比较好的 font-family 的设置 应该是这样:

  1. ont-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;

在项目中,如果要兼容不同的系统,可以这样写

  1.  
  1. @font-face {
  2. 2 font-family: 'localsans-win-light';
  3. 3 src: local('Microsoft YaHei Light'),local('Microsoft JhengHei');
  4. 4 }
  5. 5 @font-face {
  6. 6 font-family: 'localsans-win-bold';
  7. 7 font-weight: bold;
  8. 8 src: local('Microsoft YaHei Bold'),local('Microsoft YaHei');
  9. 9 }
  10. 10 @font-face {
  11. 11 font-family: 'localsans-win';
  12. 12 src: local('Microsoft YaHei');
  13. 13 }
  14. 14 @font-face {
  15. 15 font-family: 'localsans-mac-light';
  16. 16 src: local('PingFangSC-Light'),local('HiraginoSansGB-W3');
  17. 17 }
  18. 18 @font-face {
  19. 19 font-family: 'localsans-mac';
  20. 20 src: local('PingFangSC-Regular'),local('HiraginoSansGB-W3');
  21. 21 }
  22. 22 @font-face {
  23. 23 font-family: 'localsans-mac-bold';
  24. 24 src: local('PingFangSC-Semibold'),local('HiraginoSansGB-W6');
  25. 25 }
  26. 26 html,
  27. 27 body {
  28. 28 margin: 0;
  29. 29 padding: 0;
  30. 30 height: 100%;
  31. 31 font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
  32. 32 }

有些情况需要注意:

  • 当此属性定义的是全局样式时,对于表单类的标签就不会生效,还需要再次定义如: body {font-family: “Microsoft YaHei”;}对表单input就不生效, 还需要定义一个input {font-family: “Microsoft YaHei”;}才可以。
  • 本地计算机不存在微软雅黑字体,有的系统默认没有微软雅黑,则一般默认为宋体,只要下载一个微软雅黑字体,安装后即可。
  • .还有一个是字符集问题,建议把中文font-family:” 微软雅黑”;改为font-family: “Microsoft YaHei”;字符集申明一下UTF-8或GB2312。

字体在mac win 系统如何优雅的展示的更多相关文章

  1. Cocos2d-x3.0终于版Mac以及Win系统相关环境部署

    因个人原因此博客停止更新,其它更新博文将在该博客继续更新. http://blog.csdn.net/xiaohan_aimti/article/details/24653831 就在前几天,2014 ...

  2. Mac使用bootcamp安装win系统花屏解决方法

    15年11'乞丐版air装win屏幕花屏,很郁闷,先后找了网上很多方法,最终总结出了一个比较折中的方法,不玩游戏不使用大型3D的可以参考. 1 花屏现象 2 解决方法 2.1 禁用驱动 2.2 使用M ...

  3. 解决mac/win双系统,mac原生读写NTFS分区重启后失效的问题

    安装mac/win双系统,然后在mac下启用原生的NTFS分区读写功能,并将分区创建桌面快捷方式后,会发现有时候进入win后再进mac,原来创建的分区桌面快捷方式是白色的图标,并且分区也无法打开,这个 ...

  4. 让鼠标滚轮在WINDOWS系统中也和MAC一样滚动(WIN系统鼠标滚轮反向)

    用习惯MAC系统偶尔要用用WINDOWS系统,或者由于各种原因总之时不时需要由MAC转向WIN系统或同时需要两个平台机器上倒腾来倒腾去的同学,一般来说最痛苦的就是鼠标滚轮方向不一致. 基本上我们知道苹 ...

  5. 说说自己为什么用Mac不用Win系统?

    原本Mac和Win系统各有优劣,但偏偏最近有人误导身边的朋友说"学编程肯定是Windows系统呀,Mac不行的",又不给出有说服力的理由,于是我心有愤懑,正好趁机总结一下自己对于两 ...

  6. Mac双系统切换

    苹果系统和WIN7系统  切换和使用说明 先按住“alt(opfion)”不放手,然后在按开机键,会进入选择页面,选择win8 会进入 windos页面 ,选择MACintos h HD(Mac)会进 ...

  7. 使用VMware Workstation Pro 12 虚拟机安装Mac OS系统教程 全程图解

    导读:使用虚拟机安装Windows.Linux或者Ubuntu系统大家或许看了很多,但如何使用VMware Workstation Pro 12安装Mac OS,的确需要好好研究一番:否则无法下手,因 ...

  8. 阿里云VPS(win系统)装ROS教程

    以下方法是VPS下的WIN系统下安装ROS的方法,LINUX暂时没有 VPS系统装2003或2008 ,建议2008 启动快,安全,但以下内容是在2003上测试的, 2003系统,2003设置开机自动 ...

  9. mac osx 系统 brew install hadoop 安装指南

    mac osx 系统 brew  install hadoop 安装指南   brew install hadoop 配置 core-site.xml:配置hdfs文件地址(记得chmod 对应文件夹 ...

随机推荐

  1. C#可遍历的集合

    public class Product { /// <summary> /// 自增ID /// </summary> public int ID { get; set; } ...

  2. WinForm实现Rabbitmq官网6个案例-Routing

    代码: namespace RabbitMQDemo { public partial class Routing : Form { private string exchangeName = &qu ...

  3. linux shell实现守护进程 看门狗 脚本

    嵌入式初学者,第一次上传代码.昨天做了一个udhcpd与udhcpc的守护,目前只会用shell模仿编写,还有什么方法可以做守护呢? ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...

  4. Angular5中提取公共组件之checkbox list

    因为工作原因,需要使用到checkbox list多选项功能. 一直在尝试在checkbox组件中添加NgModel的属性,但是只能在单个checkbox复选框上使用,checkbox list就没办 ...

  5. 大数据实时计算工程师/Hadoop工程师/数据分析师职业路线图

    http://edu.51cto.com/roadmap/view/id-29.html http://my.oschina.net/infiniteSpace/blog/308401 大数据实时计算 ...

  6. 通过Windows Server 2008 R2建立iSCSI存储

    名词解释:iSCSI技术是一种由IBM公司研究开发的,是一个供硬件设备使用的可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行 SCSI协议,使其能够在诸如高速千兆以太网上 ...

  7. 利用describe( )中的count来检查数据是否缺省

    #-*- coding: utf-8 -*- #在python的pandas库中,只需要读入数据,然后使用describe()函数就可以查看数据的基本情况 import pandas as pd in ...

  8. 015.2Condiction接口

    Condiction对象能够让线程等待,也能够唤醒相应的线程,通过下面方法,具体看代码:await();signal();signalAll(); 使用步骤:1)创建锁2)通过锁拿到Condictio ...

  9. 【转】iphone 输入/输出流异步读写数据

    原文:iphone 输入/输出流异步读写数据 分类: iphone2012-05-30 14:50 2484人阅读 评论(1) 收藏 举报 iphoneattributesinterfacepaths ...

  10. struts2面试整理

    struts2的工作原理 客户端发送请求 经过一系列的过滤器 FilterDispatcher通过ActionMapper来决定这个REquest需要调用的Action FilterDispather ...