css文本字体的选择(font-family)
css文本字体的选择(font-family)
校友君 发表于3年前
css文本字体的选择(font-family)
  • 发表于 3年前
  • 阅读 14
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 摘自《CSS实战手册》作者:David Sawyer McFarland

首先来个例子:font-family: Arial, Helvetica, sans-serif;

本例中,web浏览器会先看看是否安装了 Arial 字体。如果安装了,那么就用这种字体;如果没有安装,浏览器就会继续寻找 Helvetica 字体;如果还是没有找到,最后它就会指定一种通用的字体——sans-serif。当你指定一种通用的字体样式(如 sans-serif 或 serif)时,访问者的浏览器就会选择那种字体。但你至少可以预知它的基本特征。

如果字体的名称中包含多个单词,则必须用双引号("")将它们括起来,如:

    font-family: "Times New Roman", Times, serif;

以下是一些常用的字体类型组合,每一列的最后都包含一种通用的字体。

Serif 字体

Serif 字体 最适用于冗长的文字信息,因为大家都觉得这种字体使字母主笔划的结尾处会有一些细小的“足”,能够比较有效地引导人们的视线从一个字母移到下一个字母,阅读起来感觉更加轻松。serif 字体包括:Times、Times New Roman、Georgia;

"Times New Roman", Times,serif

Georgia, "Times New Roman", Times, serif

Baskerville, "Palatino Linotype", Times, serif

"Hoefler Text", Garamond, Times, serif

大家可以自行测试下,很简单的。另,字体在windows系统和Mac系统上显示时并不会一模一样。这两个系统带有不同的内建字体。此外消除锯齿的功能(使屏幕上的文字看起来更加光滑)在Mac系统上的效果比在Windows上更好一些。如果你用的是win系统,又希望在自己机上显示出来的字体更好看一些,可以启用Microsoft的ClearType 技术,详情见:www.microsoft.com/typography/cleartype

Sans-serif 字体

Sans-serif 字体 看起来干净而简洁,所以经常被用在标题上。Sans-serif 字体包括: Arial、Helvetica、Verdana、和 Formata;

Arial, Helvetica, sans-serif

Verdana, Arial, Helvetica,sans-serif

Geneva, Arial, Helvetica, sans-serif

Tahoma, "Lucida Grande", Arial, sans-serif

"Trebuchet MS", Arial, Helvetica, sans-serif

"Century Gothic", "Gill Sans", Arial, sans-serif

Monospaced 字体

Monospaced (等宽)字体 经常用于显示计算机代码。Monospaced字体中的每个字母都是等宽的(打字机一般是用这种字体将数据成整齐的列)。

"Courier New", Courier, monospace

"Lucida Console", Monaco, monospace

"Copperplate Light", "Coppenrplate Gothic Light", serif

"Marker Felt", "Comic Sans MS", fantasy

其他字体

从理论上讲,字体种类有成千上万种,并且每一种操作系统自带的字体还不在此列。但是下面这些字体在Mac和PC上都十分常用,因此需要特别留意:

Arial Black

Arial Narrow

Impact

要特别注意 Arial Black 和 Impact 字体,它们只有一种形式,没有斜体。因此,在使用这些字体时,一定要将 font-weight 和 fonr-style 设置为 normal。否则,如果将文本设置为粗体或斜体,浏览器就会绞尽脑汁去猜测这些文字应该是什么样子。

另:www.codestyle.org/css/font-family 网站上可以找到更多关于哪些操作系统上装有哪些字体的信息,包括 Mac、Windows 和 Linux 系统。

共有 人打赏支持
粉丝 4
博文 5
码字总数 5151
×
校友君
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: