字体

最标准的系统字体规范font-family

最标准的系统字体规范font-family

注意系统默认字体和浏览器默认字体这个差别。

直接提供方案:

font: 14px/1.6 
/*西文*/-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,
/*中文*/PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;

这些都是些什么字体?

1、-apple-system, BlinkMacSystemFont:

在Web内容中使用系统字体

某天(2016.07.12)发现GitHub的字体比原来宽了一些,打开开发者工具一看,字体设置中多了两个奇怪的玩意:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

-apple-systemBlinkMacSystemFont是什么东东?根据Webkit博客-apple-system

网络字体的中文用法

如果你使用的Windows XP操作系统,在浏览中文网页时,你会发现网页上的汉字基本上全部都是宋体。这是因为你的操作系统里安装了中文宋体字库,而且被设定为默认字体。浏览器会用你的默认字体显示网页上的汉字。进入Windows7/8时代,Windows系统的默认字体变成了微软雅黑,于是,所有的中文网站上的汉字使用的字体都是微软雅黑。

网页上的汉字显示时使用的字库可以用CSS指定(font-family),比如说,你不喜欢微软雅黑,你的电脑里安装了另外一种字体,叫做“徐静蕾手写体”,你想用这种字体来显示你的网页上的汉字,你看可以在CSS里这样写:…