HTML/CSS 说说网页常用字体

这里mark一下常用英文字体：

1font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
2

当然还有诸如：Verdana Tahoma之类的字体啦~

另外，还有一个现在常用的英文字体：Open Sans

在google和FontSquirrel提供下载（那个页面有链接啦^-^）

鉴于google什么的被墙了，我们就用CSS自行引入吧，用google的代码作为参考：

1@font-face {
2  font-family: 'Open Sans';
3  font-style: normal;
4  font-weight: 400;
5  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
6}
7

修改其中的url就好了。

关于@font-face，是CSS3中的一个模块，但是IE早早的就支持了，语法如下：

1   @font-face {
2      font-family: <YourWebFontName>;
3      src: <source> [<format>][,<source> [<format>]]*;
4      [font-weight: <weight>];
5      [font-style: <style>];
6    }
7

取值说明

1、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”

2、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

3、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

4、weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

另外，不同字体格式，浏览器支持的版本有差异。关于font-face的更多了解可见: CSS3 @font-face

对于英文字体而言，载入速度还是可以的，但如果是中文字体，由于字库大的缘故，就会影响载入速度了。

然后再来顺便说说匹配规则吧。比如说：

1body {
2  font-family: "Helvetica Neue", Helvetica, Arial, 'Microsoft Yahei', 'Simsun', sans-serif;
3}
4

在body里设定了一段，那么理论上而言子节点都会匹配，但由于浏览器有默认值，所以不一定能运用成功，这时候就得单独设置啦ㄟ( ▔, ▔ )ㄏ，比如button/a等标签。

在匹配时，他会按照次序一个个去查找字库，前两种字体在电脑里都没有，但有Arial，就会去匹配他，但Arial不带英文呀，这个时候如果是中文字体就会依次向后去调用Microsoft Yahei（另外这里Simsun指的是宋体），最后使用sans-serif，这是所有无衬线字体的合称。

另外现在常用的还有图标字体，其中字库很全的是：Font Awesome，特别赞，而且下载完引用一段CSS就可以使用了，是为bootstrap设计的，但相比bootstrap里的字要全得多。

取值说明

评论 (0)