肉渣教程

CSS 字体

上一节 下一节

CSS字体相关的样式包括字体类型(font-family)字粗(font-weight)字体大小(font-size)以及字体风格(font-style)

字体种类 font-family

如果想设置一段文本的字体类型,诸如黑体、宋体、楷体、Times、Serif、Sans-serif等字体。此时使用CSS中的font-family属性即可。

如下所示,font-family属性的取值可以是不只一个值,每个值之间用英文中的逗号隔开;从左到右,如果浏览器不支持第1种字体,则会依次从左往右去试,直到找到可支持的字体,如果找不到可支持的字体则会采用浏览器的默认字体;当找到第一个可支持的字体后,浏览器就会选择该字体且不会继续向右去读取了。

但是要注意:如果某类字体的名称不只一个词而存在空格,则需要用英文输入法中的引号将其框起来,譬如"Times New Roman"。

p.serif {
    font-family: "Times New Roman", Times, serif;
}

p.simsun {
    font-family: SimSun, Arial;
    font-size:24px;
}

运行一下


如下是CSS中常用的汉语字体(查看更多汉语字体):

  • 黑体 - SimHei
  • 楷体 - KaiTi
  • 宋体 - SimSun
  • 仿宋 - FangSong
  • 新宋体 - NSimSun
  • 微软雅黑体 - Microsoft YaHei
  • 微軟正黑體 - Microsoft JhengHei
  • 仿宋_GB2312 - FangSong_GB2312
  • 楷体_GB2312 - KaiTi_GB2312

字体粗细 font-weight

CSS中的font-weight属性可以设置字体的字粗,该属性的取值如下:

  • normal - 正常粗细(默认),等价于400字粗
  • bold - 粗体,等价于700字粗
  • bolder - 超级粗体
  • lighter - 细体
  • 100/200/300/400/500/600/700/800/900 - 数字来表示,一般来说是这9档数字来表示(对于敏感度不高的浏览器,字粗差异不会显示地那么明显梯度)
p.light {
    font-weight: lighter;
}

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}

运行一下

字体大小 font-size

CSS中的font-size属性是用来定义字体大小的。

使用像素为单位来设置

如下所示,以像素(px)为单位,加之具体数值,以定义元素的文本字体大小:

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

运行一下


使用em为单位来设置

em单位在默认状态下,与像素px单位的换算是1em=16px;但是em与px单位最大的不同是,em为单位的元素,会根据文档的字体大小比例变化而变化,px为单位则不会。如下例所示:

/* 把100%换成别的取值来试试 */
body {
    font-size: 100%;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 2.5em;
}

运行一下


使用vw来设置字体大小(不常用)

所谓的vw单位,则是viewport width(视窗大小)的缩写。1vw即1%的浏览器视窗宽度,依次类推10vw,就是指10%的视窗宽度。

h1 {
    font-size: 10vw;
}

h2 {
    font-size: 5vw;
}

p {
    font-size: 1vw;
}

运行一下


W3C更推荐使用em来设置字体大小,专否更推荐使用px来设置大小;因为密斯·凡德罗这位建筑大师曾经说过“Less is More”。

字体风格 font-style

CSS中的font-style属性一般用来把字体定义成斜体风格。其取值如下:

  • normal - 就是正常状态,不倾斜(默认就是这种)
  • italic - 定义字体为斜体
  • oblique - 定义字体为倾斜(效果与italic一样,但是浏览器兼容性没有italic高,因此不被常用)
p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

运行一下


CSS 字体

上一节 下一节