设计稿中用的是仿真兰亭粗体,不知浏览器支不支持?
为什么像宋体 微软雅黑之类的写在font-family中浏览器就会呈现呢?
浏览器到底都支持那些字体?
总体来说浏览器的字体问题比较复杂
首先,浏览器支持什么字体取决于用户系统里安装了什么字体,比如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');
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。