浏览器都支持什么字体呢?

设计稿中用的是仿真兰亭粗体,不知浏览器支不支持?
为什么像宋体 微软雅黑之类的写在font-family中浏览器就会呈现呢?
浏览器到底都支持那些字体?

阅读 26.3k
3 个回答

我来试着回答一下:
总体来说浏览器的字体问题比较复杂~~额。。。废话么

首先,浏览器支持什么字体取决于用户系统里安装了什么字体,比如CSS中这么写:
font-family:"微软雅黑","黑体","宋体";
那么浏览器会尝试按照从左到右的顺序依次应用,假设用户电脑上没有安装微软雅黑,那么就用黑体。

接下来,开发人员有点郁闷了,这个世界有这么多字体,我怎么保证用户电脑上有我希望的字体呢?美工给我的完美效果,到了老板电脑上一团糟,会不会被骂死?

这时,CSS勇敢的站出来了,它约定了5种通用字体:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace",请注意,这5个不是5个字体,表示5类字体,比如说serif表示那种字体成比例,且上下有小横线的(参考time new roman),那么只要符合这个特征的字体都可以算成是serif, 具体采用哪个字体,由浏览器自己根据用户电脑上安装了哪种字体采用一个默认的,各浏览器可能有所不同。几乎所有你知道的普通字体都落入这5种字体类中,这样CSS可以基本上保证一个网页呈现在不同用户的电脑上的用户体验是差不多的。

最后,我们的美工比较变态,非要弄了个高大上的字体,一般用户电脑上都没有的咋整?我们可以用font-face让用户的浏览器从服务器上下载字体

@font-face {
    font-family: 美轮美奂的字体;
    src:url('字体文件1.woff'),  
    url('字体文件2.ttf'),
    url('字体文件3.eot');
}

你问我为什么要搞好几个url指向多个字体文件?我只能说还是为了那个坑爹的兼容性,怕有的字体文件在这个操作系统不支持啊。。。

总结:浏览器支持哪些字体? 支持任何你想支持的字体。。。

Q 宋体 微软雅黑之类的写在font-family里面浏览器就会呈现
A 这些是系统内置的,浏览器会调用内置字体。


自定义字体方法参考一楼。

可以自定义字体,不过完整的中文字体都很大的。
如果你页面只是用到少量的方正兰亭粗黑文字,可以使用自制字体。
例如我的个人博客用到了一个方正剑体简体(原文件2.6M,这么大放在网页里加载显然是不行的)(只能自定义的,只有标题4个大字,容量4KB)
对于少量引用固定文字的可以采用这种自制字体的方式引用。
对于大量文字的动态页面则不能采用这种方案,原字体容量太大,不适合该场景。

方案

1.这里有一个动态引用字体的网站 有字库 http://www.youziku.com
这是根据你页面引用的文字自动加载的,效果挺好(但是用户多了,有时候网站会挂掉)

2.和我的博客一样自定义字体使用了 Font Creator

3.在线生成手写字体 http://59.108.48.27/flexifont-chn/login/

ps. 对于固定文字,什么字体都不是问题,哪怕是你们美工手绘的。

理论上任何字体都支持。问题是中文字体往往比较大不便于传输,所以大部分情况选择系统自带的字体,而每个系统自带的字体又有所不同,所以,字体的设置我们往往设置多个,然后浏览器根据你的顺序逐个遍历,找到了当前系统拥有的字体就使用那一个。如果需要用到特殊的中文字体,有个解决方案叫webfont,你可以找相关资料看看。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏