那些被忽视的字体细节

css

font属性

简写形式

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

我们并不需要设置全部的参数，没有设置的浏览器会使用默认的样式(默认样式与浏览器相关)

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

font-style: 设置或检索对象中的字体样式

normal：
指定文本字体样式为正常的字体
italic：
指定文本字体样式为斜体。对于没有斜体变量的特殊字体，将应用oblique
oblique：
指定文本字体样式为倾斜的字体

font-style：normal | italic | oblique
<b>Hello Xiaofu</b> 
<b style="font-style:italic;">Hello Xiaofu</b> 
<b style="font-style:oblique;">Hello Xiaofu</b>

Hello Xiaofu Hello Xiaofu Hello Xiaofu

font-variant: 设置或检索对象中的文本是否为小型的大写字母

font-variant：normal | small-caps
<b style="font-variant:normal;">Hello Xiaofu</b> 
<b style="font-variant:small-caps;">Hello Xiaofu</b> 
<b style="font-variant:small-caps;">hello xiaofu</b>

Hello Xiaofu Hello Xiaofu hello xiaofu

从上面可以看到small-caps属性会将小写字符转换为小型的大写字符，即大写形式，但大小和小写的大小一样.

font-weight: 设置文本的粗细

font-weight：normal | bold | bolder | lighter | <integer>
/*integer的取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900*/

hello xiaofu[400]
hello xiaofu[700]
hello xiaofu
hello xiaofu

font-size/line-height: 设置文本字体大小

font-size：<absolute-size> | <relative-size> | <length> | <percentage>

absolute-size：
根据对象字体进行调节。可选参数值：xx-small | x-small | small | medium | large | x-large | xx-large
relative-size：
相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。可选参数值：smaller | larger
length：
用长度值指定文字大小。不允许负值。
percentage：
用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。

line-height: 行高，设置行间距离，不可设置负值

当给块级元素设置行高时，它定义的是元素中基线之间的最小距离而不是最大距离。

font-family

font-family 规定元素的字体系列
font-family 可以指定一系列的字体，如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或一个字体优先级表，浏览器会使用它可识别的第一个值。

有两种类型的字体系列名称：

  • 指定的系列名称：具体字体的名称，比如：”times”、”courier”、”arial”。
  • 通常字体系列名称：比如：”serif”、”sans-serif”、”cursive”、”fantasy”、”monospace”

这里为什么需要通用字体系列名称，这里是css帮助我们解决字体命名混乱的问题而增加的，因为相似的字体命名可能会不一样，所以我们可以设置通用字体系列，如当我们设置 “serif”字体系列时，浏览器找到Times、Georgia 和 New Century Schoolbook时就会使用其中的一种字体来渲染，因为他们都属于”serif”字体。

font-family: Georgia, "Times New Roman", 
             "Microsoft YaHei", "微软雅黑", 
             STXihei, "华文细黑", 
             serif;

字体设置技巧

  • 1.先设置英文字体，再设置中文字体(英文在中文字体下显示不好，避免中文字体包含的英文字符采用中文字体显示)
  • 2.中文字体中文名称和英文名称一起指定（避免出现识别不了的情况）
  • 3.设置一个通用字体结尾，这样当前面指定的特定字体用户计算机上都没装有的情况下，字体可以按照我们期望的字体风格显示.
Prev Next