css 字体

1、字体族
字体是一推的东西，字体族就是一堆的字体，具体可以分为5个字体族
－ serif sans-serif monospace cursive fantasy
serif 衬线字体，就是字体周围会一些装饰性，像衬衫一样，顶部或底部会有多出来的短线，比如宋体
sans-serif 非衬线字体，它的笔画的起和收都是非常规则的，比如黑体

 

monospace 等宽字体，就是每个字母占的空间是一样的，代码一般都是等宽字体
cursive 手写体，比如很多书法家写的，在网页上一般比较少用到
fantasy 花体，在英文中，比如比较华丽的，弯弯拐拐的那种

 

2、多字体fallback
这个词听起来好难理解，其实就是当你一个字体指定的时候，但是又找不到，就会接着往后找，比如微软雅黑，如果微软雅黑找不到，就用黑体，如果黑体找不到，就随便找一个非衬线字体。这个就是fallback机制

 

3、网络字体、自定义字体
一个是远程引用字体，一个是本地引用字体

 

4、iconfont
既然可以规定自定义字体，那么我就可以规定a长什么样，b长什么样，a长的像手机的图标，b长的像电脑的图标

 

demo:
<body>
　　<div class="body" id="body">
　　　　hello world 你好，世界
　　</div>
</body>
<style>
　　body{
　　　　font-family: "monaco"
　　}
</style>

 

看到monaco其实是一个等宽字体，看调试工具有一个computed，就是计算之后的属性，那下面呢有一个Rendered Fonts，就是浏览器是用什么渲染的，好，这里就有点意思了，monaco是一套英文字体，也就是它里面不包含中文字符的。那么看到hello world是用monaco，肯定是没有疑问的。那接下来问题就是你好，世界。那么这5个字符是用什么渲染的，浏览器告诉我们了，用的是PingFang SC。这是浏览器默认的fallback字体
<style>
　　body{
　　　　font-family: "monaco", "PingFang SC"
　　}
</style>
如果把字体改成这样，渲染出来是一模一样的，但是我们用了一个并不存在的字体
<style>
　　body{
　　　　font-family: "aaaaaaa","monaco", "PingFang SC"
　　}
</style>
发现渲染出来的还是一样的，因为“aaaaaaa”根本不存在
＊：字体用引号引起来是没错的，但是字体族是不能用冒号引起来的，不然就不起作用
<style>
　　.chinese{
　　　　font-family: "PingFang SC", "Mocrosoft Yahei", monospace
　　}
</style>
要考虑到平台，如果是mac的就用"PingFang SC"渲染。如果是windows的，就用"Mocrosoft Yahei"去渲染。如果都没有，就用等宽字体去渲染。这也是在很多平台看到字体很长的原因，因为他要去识别很多平台。



自定义字体demo
 
<body>
　　<div class="custom-font"> 你好 hello world</div>
</body>
<style>
　　@font-face{
　　　　font-family: "IF";
　　　　src: url("./IndieFlower.ttf")
　　}
　　.custom-font{
　　　　font-family: IF;
　　}
</style>
这样就完成了自定义字体的设置。自定义字体里面的url也可以是网络字体。这个网络字体可能会遇到跨域的问题。
 
 
字体格式
@font-face {
    font-family: <fontFamily>; /* 自定义的字体名称; */
    src: <source> [<format>][,<source> [<format>]]*;  /* 自定义的字体的存放路径、格式; */
    [font-weight: <weight>]; /*  是否为粗体 */ 
    [font-style: <style>]; /*  定义字体样式，如斜体 */
}

从上面下载的字体解压包来看，我们看到两个不同格式的字体（ .ttf 和 .otf ），除此之外还有几种字体格式，大体介绍如下（可以了解下）：

  • TrueType (.ttf)

    Windows 和 Mac 系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

  • OpenType (.otf)

    OpenType 是一种可缩放字型（scalable font）电脑字体类型，采用 PostScript格式，是美国微软公司与Adobe 公司联合开发，用来替代 TrueType 字型的新字型。这类字体的文件扩展名为.otf，类型代码是 OTTO。

  • Embedded Open Type (.eot)

    嵌入字体格式（EOT）是微软开发的一种技术，允许 OpenType 字体嵌入到网页并可以下载至浏览器渲染。这些文件只在当前页活动的状态下，临时安装在用户的系统中。

  • Web Open Font Format (.woff)

    相对于 TrueType 和 OpenType ，WOFF（Web开发字体格式）是一种专门为了 Web 而设计的字体格式标准，它并不复杂，实际上只是对于 TrueType / OpenType 等字体格式的封装，并针对网络使用加以优化：每个字体文件中含有字体以及针对字体的元数据（ Metadata ），字体文件被压缩，以便于网络传输，并且不包含任何加密或者 DRM 措施。

  • Scalable Vector Graphics Fonts (.svg) 顾名思义，就是使用SVG技术来呈现字体，还有一种 gzip 压缩格式的 SVG 字体 .svgz。

这么多字体带来的问题是浏览器的支持：目前现代浏览器基本都支持 .ttf、 .otf、 .woff 的字体格式。但需要注意的是 IE8以下仅支持 .eot 格式，而 .svg 目前只有 safari 支持。具体兼容性可参看如下：

posted @ 2019-01-17 07:04  wzndkj  阅读(260)  评论(0)  编辑  收藏  举报