总是搞不懂 CCS 中如何正确的使用字体,这下明白了。

1、什么是 font-face

font-face 顾名思义,就是文字的脸。字体是文字的外在形式,就是文字的风格,是文字的外衣。比如行书、楷书、草书,都是一种字体。同样一个字每个人写起来都会有差异,可以说每个人都有一套潜在的字体库。对于web页面来说,字体就是计算机上存储的一套文字显示方式。通过对文字进行一些特殊处理(比如末端加强)来提高不同环境中文字的可读性。

2、什么是 font-family

关于 font-family 的介绍大多数只是说明他可以设置文本中的字体名称序列。其实 font-family 真正的作用是将一系列近似的字体按照优先级顺序组成一个列表,浏览器从第一项开始依次查找,找到第一种可用的字体来显示文字。

font-family: Times New Roman,"open-sans","幼圆",sans-serif

当浏览器显示一个字符时,会首先从 Times New Roman 中寻找这个字符,如果找到就用 Times New Roman 字体来显示这个字符。如果没找到就去 open-sans 中寻找,如果找到就用该字体显示字符,没找到就会依次寻找下去,如果在通用字体库 sans-serif 中也没有找到就会用一个缺字符代替(通常是小方框)。

<p style='font-family: Times New Roman,"open-sans","幼圆",sans-serif'>
<span>时间就是金钱</span><span>Time is money.</span>
</p>

比如上面这段代码,对于汉字部分浏览器会先去 Times New Roman 中查找,没有找到,接着再去 open-sans 中查找,仍然没有找到,继续到“幼圆”中寻找,幼圆中可以找到对应字符则用该字体来显示。对于英文部分可以在 Times New Roman 中寻找则会用该字体来显示。

font-family 中有时候字体加引号有时候不加引号。区别在于对字体名称中空格的处理不同。不加引号时,忽略字体左右两端的空白字符,单词之间的空白字符被解释为一个空白字符。

最新文章

  1. .Net组件程序设计之远程调用(二)
  2. sdcms标签
  3. C#夯实基础系列之const与readonly
  4. 移动web开发准备知识点
  5. UIScrollView 滑动复位
  6. DTMF的原理分析
  7. 通过PID获取进程路径的几种方法
  8. QT学习之路---信号槽
  9. 安卓使用WIFI调试程序
  10. 左移运算符&lt;&lt;
  11. php获取某个目录下面文件的内容
  12. IOS流媒体播放
  13. error C3130: 内部编译器错误: 未能将插入的代码块写入PDB
  14. sql点滴37—mysql中的错误Data too long for column &#39;&#39; at row 1
  15. android学习2——RelativeLayout
  16. 1.Maven的安装及配置
  17. 用 Hexo + Github 搭建自己的博客
  18. C语言结构体作业
  19. idea编辑器激活码
  20. 饮冰三年-人工智能-Python-11之HelloWorld

热门文章

  1. JavaWeb遗漏的知识点
  2. JDBC连接数据库时错误提示的解决方案汇总
  3. Xshell中使用FTP/SFTP工具下载文件
  4. 【2017 World Final E】Need For Speed(二分)
  5. Django快速开发投票系统
  6. Percona-Tookit工具包之pt-online-schema-change
  7. Tornado异步之-协程与回调
  8. python 方法解析顺序 mro
  9. 最短路径算法 4.SPFA算法(1)
  10. IdFTP中FEAT命令的问题