一、选择字体
CSS提供了许多不同的字体供你选择。字体可以通过font-family属性来设置。值得一提的是,在设置字体时尽量使用共享的字体族名称,而不是特定的字体名称。下面是一个例子:
p{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
这里,"Helvetica Neue"是特定字体名称,它是Mac OS X和iOS中常用的字体。 Helvetica是一个相似的字体,它在大多数情况下也会工作,Arial是针对未经过许可的情况下提供的一种类似字体,sans-serif是作为默认备选字体提供的通用字体族名称。
你也可以引用网络字体或下载的字体文件:
@font-face{ font-family: "MyCustomFont"; src: url("../fonts/MyCustomFont.ttf"); } p{ font-family: "MyCustomFont", sans-serif; }
这个例子中,我们从外部文件夹fonts加载自定义字体文件MyCustomFont.ttf,在设置字体时我们使用了font-family:"MyCustomFont", sans-serif,这样会首先使用自定义字体,如果找不到该字体,则会使用默认的sans-serif字体族名称。
二、选择字体大小
选择恰当的字体大小,既不能太大以至于淹没整页,也不能太小以至于不可读。在CSS中,一般使用像素(px),百分比(%)或em来设置字体大小。下面是一个例子:
h1{ font-size: 36px; } p{ font-size: 16px; }
这里,h1的字体大小是36像素,而p的字体大小是16像素。注意,当你指定一个元素的字体大小时,这对于所有它们衍生的子元素来说都是一个起点值。例如:
div{ font-size: 16px; } div h1{ font-size: 1.5em; /* 这里的字体大小是24px(16px * 1.5) */ }
在这个例子中,我们使用16像素的字体大小设置了div的字体大小。然后,我们使用1.5em将它的h1的字体大小设置为div字体大小的1.5倍。在这个例子中,h1字体大小为24像素。
三、字重和字体样式
除了字体和字体大小之外,你还可以通过CSS来设置字重和字体样式。例如:
h1{ font-weight: bold; /* 等价于font-weight: 700; */ font-style: italic; }
这里,我们将h1的字体设置为粗体,这是一种特殊的字体重量,等价于数值700,另外我们也将字体样式设置为斜体。
四、边框和阴影
对于某些字体和大小而言,边框和阴影可能会增强字体的可读性。你可以利用CSS的text-shadow属性实现这一点:
p{ text-shadow: 1px 1px #000; }
在这个例子中,我们在p元素文本下方右下方添加了1像素x轴和y轴方向的阴影,并将阴影颜色设置为黑色。
同样,我们也可以添加文字边框,代码如下:
h1{ -webkit-text-stroke: 1px black; text-stroke: 1px black; }
在这个例子中,我们使用CSS的text-stroke属性为h1标题添加了1像素宽的黑色边框。
五、调整字间距和行高
在某些情况下,你可能需要调整字间距和行高来增强文本的易读性。例如:
p{ letter-spacing: 0.5px; line-height: 1.5; }
在这个例子中,我们通过CSS的letter-spacing属性增加了文字之间的间距,并将行高设置为1.5倍。
当然,还有许多属性可以用来设置文本和字体样式。在开始使用它们之前,先尝试使用这些属性来定制你的字体,以保持简单、明了和易于读取。