Web字体的初探

Web字体的初探

一,字体基本概念的介绍

1.1 字体的分类

1.1.1 Serif(衬线体)
Serif(衬线):在印刷的文字中衬线字体对于人眼的辨识更轻松,阅读更舒服横细竖粗,开始和结束的地方有装饰。在web上的字体,衬线字体比无衬线字体的辨识度更低,因为屏幕像素有限,不能很好地渲染出衬线体的效果。
1.1.2 Sans-Serif(无衬线体)
Sans-Serif(无衬线体):在印刷的文字中,无衬线体比较醒目,在小字体场合比衬线体更加清晰,但是辨识度没有衬线体高。在web字体中,无衬线字体比衬线字体更易读。
1.1.3 Monospace(等宽字体)
Monospace(等宽字体):每个宽度都一致的字体,看起来比较整齐,比较适合用于显示代码。比较著名的有Courier New字体。
1.1.4 Cursive(草书)
Cursive(草书):相当于印刷中的手写体,看起来比较流畅,像手写一样。

1.2 常用的字体

Serif,Sans-Serif,Monospace属于标准字体,Cursive,Fantasy属于非标准字体
1.2.1 衬线体(Serif)
常用的中文衬线体:宋体(Simsun),仿宋(FangSong),楷体(KaiTi),华文仿宋(STFangSong),华文楷体(STKaiTi)。
常见的英文衬线体:Times new Roman,Times
1.2.2 无衬线体(Sans-Serif)
常见的中文无衬线体:微软雅黑(Microsoft YaHei),黑体(SimHei),华文细黑(STXiHei)
常见的英文无衬线体:Tahoma,Arial,Helvetica,Verdana
1.2.3 等宽字体(monospace)
常见的等宽字体:Courier New,Courier
1.2.4 草书(Cursive)
常见的草书:Comic Sans MS
1.2.5 Fantasy
常见的Fantasy:Impact

二,网站中使用的字体

2.1 英文网站中使用的默认字体

font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif
Tahoma:英文windows操作系统默认的字体
Helvetica:Mac OS X系统的系统默认字体
Arial:早期windows英文系统的默认字体。XP和Vista都是Tahoma
Sans-serif是针对linux的,linux默认只有kernel,字体由用户自定义。
无论是XP还是Vista下,不指定网页的中文字体时,默认的就是宋体。因此在font-family中使用”宋体“是多余的,可以省去。

2.2 Windows操作系统提供的中文字体

黑体:SimHei
宋体:SimSun
新宋体:NSimSun
仿宋:FangSong
楷体:KaiTi
仿宋GB2312:FangSongGB2312
楷体GB2312:KaiTiGB2312
微软雅黑:Microsoft YaHei(Windows 7开始提供)

2.3 OS X操作系统提供的中文字体

冬青黑体:Hiragino Sans GB(Snow Leopard开始提供)
华文细黑:STHeiti Light(又名STXiHei)
华文黑体:STHeiTi
华文楷体:STKaiTi
华文宋体:STSong
华文仿宋:STFangsong

2.4 更多有趣的字体使用

上面介绍的字体属于常见的字体,也就是我们所说的Web safe font。其在大部分网站是可以正常显示的。下面介绍的是比较有趣特殊的字体的使用方式。

2.5 使用web font的方法

2.5.1 使用link标签
通过link导入样式,然后直接通过font-family使用,如:

<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

font-family:"lobster"

参考Google Fonts

2.5.2 使用@import导入
通过@import导入字体的样式,如:

@import url(https://fonts.googleapis.com/css?family=Candal);

font-family:"Candal"

参考Google Fonts

2.5.3 使用javascript
通过javascript获取字体样式,如:
<script type="text/javascript">
     WebFontConfig = {
        google: { families: [ 'Shadows+Into+Light::latin' ] }
    };
    (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
              '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })(); 
</script>

font-family:"Shadows Into Light"

参考Google Fonts

2.5.4 使用font-face
首先需要从网站下载对应的字体,然后url填入文件路径,如:

`@font-face{

            font-family:"saucer";
            src:url("fonts/SaucerBB.ttf") format("truetype");
        }`

font-family:saucer;

2.5.5 使用这些特殊字体的弊端
使用这些特殊字体可以产生很炫酷的文字,但是也存在很大的弊端:
1,不同的环境显示的内容可能不一样
2,显示的内容不可靠
3,需要把字体包含到网站(有时可能有100kb大)中需要消耗大量的下载时间

三,大型网站上的字体实践

1.淘宝:font-family: tahoma, arial, 'Hiragino Sans GB', 宋体, sans-serif;
2.百度:font-family: arial, 宋体, 'Hiragino Sans GB', 'Microsoft Yahei', 微软雅黑, 宋体, Tahoma, Arial, Helvetica, STHeiti;
3.京东:font-family: Arial, Verdana, 宋体;
4.Youtube:font-family: Roboto, arial, sans-serif;
5.github:font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';

参考的网站:

creating good websites

serif和sans-serif的区别

中文字体网页开发指南

    原文作者:wangfulin
    原文地址: https://segmentfault.com/a/1190000003932400
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞