CSS学习篇(六) 字体

CSS学习篇(六) 字体
0

  在 CSS 中,可以设置字体的大小、颜色、种类等,这里重点讨论的是字体种类,除了一般字体的设置,还有将记录 Web 字体的设置方式。

  我们知道,当设置网页上字体的时候,如果显示网页的浏览器或其所在的电脑上不包含该字体的话,是无法显示出对应的字体来的,这时候可能使用浏览器默认字体来代替,那么一般会有 两种 措施来预防这种情况:

  • 选用网页安全字体
  • 利用字体栈来设置

  第一种选用网页安全字体 ,就是指选用一些基本上在所有主流电脑系统上都有的字体,网页安全字体有几大类:

网页安全字体类型

名称 定义 示例
serif 有衬线的字体 (衬线一词是指字体笔画尾端的小装饰,存在于某些印刷体字体中) My big red elephant
sans-serif 没有衬线的字体。 My big red elephant
monospace 每个字符具有相同宽度的字体,通常用于代码列表。 My big red elephant
cursive 用于模拟笔迹的字体,具有流动的连接笔画。 My big red elephant
fantasy 用来装饰的字体 My big red elephant

  除此之外,可以参考网页 CSSFontStack 网站上所维护的 Windows 和 Mac 中网络安全字体类型,还会标记处对应系统存有各字体所占的比例。

  第二种利用字体栈来设置字体 ,就是说不要只设置一种字体,为了保险起见多设置几种,每种字体之间使用逗号相隔:

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

  如果第一个字体在系统中找不到,那就找第二个,如果第二个字体也找不到那就继续往后找,直到找到可用字体或者最后一个字体,一般把最后一个字体设置成上面网页安全字体的一种以防万一。

  PS:有些字体名字由空格组成,应该使用引号来包含这种字体名。

  另外要说一下的是,我们试用中文系统,显示的一般是中文文字,那么如果要把字体设置为“宋体”、“黑体”、“楷体”之类的要如何处理,中文字体也可以使用英文表示法,例如:

<p style="font-family:STXINWEI;">中国智造,惠及全球</p>

  这里“STXINWEI”代表华文新魏,具体字体名字对应的英文表示法可以从网上搜索,或者直接打开自己电脑系统路径C:\Windows\Fonts,这里有你电脑上按照的字体文件,找到你想要的对应字体可以右键字体文件,选择“属性”并显示出对应文件名,复制粘贴文件名即可:

Web字体

  除了直接使用font-family来设置字体种类外,还可以在CSS上使用Web字体,它会随网页一起下载到浏览器客户端中以便显示该电脑上没有的字体,这里涉及@font-face的使用:

@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}

  这里myFont就是这种Web字体的自定义新名词,可以用在font-family的字体栈里:

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

  

  使用Web字体前有两个问题需要考虑:

  1.字体兼容性,不同浏览器可能支持不同格式的字体,大多数现代浏览器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2,Web开放字体格式版本1和2),它是最有效的格式,但是旧版本IE只支持EOT (Embedded Open Type,嵌入式开放类型)的字体,你可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器。

  2.字体版权,有些字体是收费的,需要购买版权使用,有些则是免费,满足免费授权的条件即可(例如在网页中标明字体版权所有者)。

  Web字体的获取途径:

  • 免费字体供应商:例如fontsquirrel
  • 付费字体供应商:例如fonts.com
  • 在线字体服务:这种用起来很方便,不需要自己写@font-face,直接插入一段代码在网页,然后就可以在CSS上面使用指定字体名称,典型的像是谷歌字体服务

  通过 前面两种途径 获取并下载来的字体文件(.otf、.ttf等),上传至Webfont生成器并生成多字体格式文件工具包,里面包含你刚刚所上传字体的多种格式文件(.woff.woff2.eot.svg\ttf)、一个“stylesheet.css”文件以及各字体Demo页面(.html),可以直接复制CSS文件的@font-face定义到你自己的CSS文件中,然后直接使用字体即可。

%E5%9B%BE%E7%89%87

  在线字体服务 更加简单了,直接到谷歌字体服务中挑选想要的字体,对想要的字体点击右上角的“+”,就像添加商品到购物车那样,然后点击右下角的“抽屉”,弹出这个字体的详细信息,里面包含了你所需的代码段,直接按照截图那样操作即可使用。

%E5%9B%BE%E7%89%87

1赞