转：字体集选择font-family

网页的字体选择很有讲究，因为它直接关系到用户的阅读感受。对于字体的选择，要做到字迹清晰、大小合适、粗细恰当，这样才能使文档便于阅读，让读者满意。在不同的环境下，字体的选择和字体样式的设计要求是不同的。本章就是介绍如何选择字体，以及如何设置有关字体的各种属性，以使一篇文章便于阅读。

5.1 字体集选择font-family

属性值：字体名称 | 通用字体集,字体名称 | 通用字体集……

初始值：由浏览器决定

作用于：所有元素

是否继承：是

百分比值：不适用

计算值：指定的值

字体是人们对文字的第一印象。对于中文而言，常用的有宋体、黑体和楷体等；对于英文而言，可供使用的字体也非常多。

font-family属性用来定义一个或者多个字体集名称，在定义两个或者两个以上字体集名称的时候，必须用英文半角逗号分隔这些名称。有的字体本身含有空格或者其他符号，例如“Times New Roman”、“Lucia Consol”，则必须把这些字体名称用双引号

引起来。行内定义的时候在双引号中嵌套的双引号相应改为单引号。示例5.1就演示了这样的做法。

示例5.1

<style>

body { font-family: "Times New Roman", Times, Serif; }

</style>

示例5.2演示了两段对比文字，其中一段不设置任何字体，另一段针对<p>元素设置手写字体，效果如图5.1所示。

示例5.2

<html>

<head>

<style>

p { font-size: 36pt;}

</style>

</head>

<body>

<p>There're thousands of fonts.</p>

<p style="font-family: script;">There're thousands of fonts.</p>

</body>

</html>

图5.1 设置字体样式的前后对比效果

针对一般中文系统而言，浏览器的默认字体为宋体，因此在第1段中文本显示为宋体的英文字母，而第2段设置了“script”字体，因此文本的外观有所改变。

一段文本应该设置多个字体名称，这样做的好处就是一旦有字体不可用，就可以使用紧跟的字体名称进行替代。例如示例5.1中，首选字体“Times New Roman”一旦遇到了意外情况不可用，此时第2个字体名称“Times”就顶替成为当前的字体。如果有更多的字体出现这种情况，则以此顺序类推。

在Dreamweaver 8中，可以很方便地选择一组字体作为字体样式，如图5.2所示。

图5.2 在Dreamweaver 8中定义一组字体名称列表

需要注意的是，有时Dreamweaver 8的预览窗口无法正确显示当前字体，如图5.3所示，设计者不必理会，只要在IE浏览的时候能够调试通过即可。

图5.3 Dreamweaver 8的字体预览显示有错误

上面的几个例子演示了定义特定字体名称的做法。另外，设计者有时候还可以定义通用字体集名称。

所谓通用字体集名称就是统一描述一类字体样式的名称，例如“serif（有边饰字体）”等，具体如表5.1所示。

表5.1 通用字体集名称

通用字体集名称	说明	示例
serif	有边饰字体
sans-serif	无边饰字体
cursive	卷曲字体
fantasy	花哨字体
monospace	独占位字体

其中这些关键字本身并不是某种确定字体的名称，例如serif有边饰字体就包括Times New Roman、Georgia等多种字体，sans-serif就包括Verdana、Arial等字体，因此浏览器在遇到字体集名称的时候，会自动从系统中寻找与之匹配的字体进行显示。

表5.2列举了与字体集相对应的字体。

表5.2 与字体集相对应的字体

字体名称	所属通用字体集	示例
Georgia	serif
Verdana	sans-serif
Monotype Corsiva	Cursive
Pristina	Fantasy
Courier New	monospace

使用通用字体集名称的好处就是浏览器总能够从系统中找到与之相匹配的具体字体，而不必担心某种字体甚至备用字体都不可用。所以，设计者在定义任何字体的时候，最好在最后都加上一个通用字体集，以保证字体显示万无一失。

示例5.3演示了使用某种字体集名称定义字体的方法。

示例5.3

<html>

<head>

<style>

body { font-family: Verdana, Arial, Sans-serif; }

</style>

</head>

<body>

<p>Here provides 2 font names and 1 generic font family.

</body>

</html>

有一点必须注意：不要定义访问者系统中不存在的字体。例如，在设计者的电脑中有一种叫做 “myownfont”的冷僻字体，在设计的过程中，设计者可以看到这种字体的显示效果，这是因为设计者电脑中已经安装了这样的字体。而其他访问者系统中并没有这种字体，浏览者打开页面看到的是用其他字体代替的文本。这样，就完全丧失了设计者最初设想的效果。

要避免这样的情况发生，首先应该尽量一次定义多个备用字体，一旦首选字体不可用，那么其他字体可以补充产生效果。

另外，设计者应该尽量使用Windows系统自带的字体，也就是说，一般在安装Windows之后，不再安装新字体。即使安装了新字体，也要坚持使用Windows原先的自带字体，这样才能保证对方系统能够看到自己的设计效果。

表5.3列举了Windows自带的常用字体，一般而言，这些字体样式已经足够日常制作网页使用了。

表5.3 Windows自带的常用字体

字体名称	说明	效果演示
Arial	无边饰、瘦长型字体
Comic Sans MS	无边饰、扭曲型字体
Courier New	有边饰、等宽字体
Fixedsys	无边饰、等宽字体
Georgia	有边饰字体
Impact	无边饰、瘦长型字体
Lucia Console	无边饰、等宽字体
Microsoft Sans Serif	无边饰字体
Tahoma	无边饰字体
Times New Roman	有边饰字体
Verdana	无边饰字体
宋体	有边饰中文字体
黑体	无边饰中文字体
隶书	有边饰中文字体
幼圆	无边饰中文字体

字体样式可谓五花八门，在其他字体集中，还可能由古体数字、小体大写数字、缩减或者扩展字母等样式，这些样式在当前版本的CSS样式表中是没有相应属性的。有关字体概念的综述详见5.7节的介绍。

转载于:https://www.cnblogs.com/yiline/archive/2011/04/24/2026484.html

转：字体集选择font-family相关推荐

vs2017字体最佳选择_如何为下一个项目选择最佳字体？一个简单的游戏
vs2017字体最佳选择 "If I have the right font, half my design battle is already won!" "如果我使用 ...
19套最新的免费图标字体集
日期:2012-10-21 来源:GBin1.com 将图标字体使用在网站上,这会是一个全新的发展趋势.一旦font-face开始支持现代浏览器,那么在网页中插入图标字体有可能成为最简单的方法之一了 ...
iOS 字体集（图文并茂）
+fontWithName:(NSString *)fontName size:(CGFloat) fontSize 创建并且返回一个指定字体类型和大小的字体对象,fontName指定字体集的 ...
小程序引入字体集方式
一般情况下为了页面好看,有些会设计会采用一些特殊的字体进行设计,这时候直接设置font-family:"该字体类型"; 就会出现没有效果,因为css里面没有这些字体,这时就要我们自 ...
android系统自带字体设置,安卓手机系统字体设置-系统字体设置(Big Font) 安卓版v2.37-PC6安卓网...
Big Font 改变系统字体大小:这个软件可以直接修改安卓系统字体的大小,相比原生系统的大中小肯那个还不能完全符合所有人.这个软件还不错. 官方介绍透过改变系统字体大小Big Font应用,你可以 ...
HTML字体以及图标字体iconfont、Font Awesome的使用
字体 • 通过font-family可以指定标签中文字使用的字体. • 例如: p{font-family:Arial} 上边这行代码指定了p标签中使用名为arial作为字体 • 一般来说只有用户 ...
css文本外观属性中设置字体,css 文本外观属性(text) 和字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距对中文无效 line ...
JavaAwtSwing笔记之字体 java.awt.Font
java.awt.Font 直接继承自Object 前言类声明构造函数 public Font(String name, int style, int size) { public Font(Ma ...
字体图标 icon font
原文地址为: 字体图标 icon font Icon font icon font 指的是用字体文件取代图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点大小可以自由 ...

转：字体集选择font-family

5.1 字体集选择font-family

转：字体集选择font-family相关推荐

最新文章

热门文章