最新的Web开发教程
 

CSS字体


CSS的字体属性定义字体,气魄,大小和文本的样式。


差异衬线和无衬线字体之间

衬线与无衬线

CSS字体家庭

在CSS中,有两种类型的字体家族名的:

  • 一般的家庭 -一组字体系列具有相似的外观(如“衬线”或“等宽字体”)
  • 字体家族 -一个特定的字体系列(如“宋体”或“宋体”)
Generic family Font family Description
Serif Times New Roman
Georgia
Serif fonts have small lines at the ends on some characters
Sans-serif Arial
Verdana
"Sans" means without - these fonts do not have the lines at the ends of characters
Monospace Courier New
Lucida Console
All monospace characters have the same width
注意注意:在计算机屏幕,无衬线字体被认为是更容易比serif字体阅读。

字体系列

文本的字体系列设置与font-family财产。

font-family属性应该持有多种字体的名称为“回退”制度。 如果该浏览器不支持的第一个字体,则尝试下一个字体,等等。

开始你想要的字体,与通用终结于家庭,让浏览器选择一个相似的字体在通用家族,如果没有其他的字体可用。

注意 :如果字体家族的名称是多个单词,则必须用引号引起来,如:“宋体”。

不止一个字体家族是一个逗号分隔的列表中指定的:

p {
    font-family: "Times New Roman", Times, serif;
}
试一试»

对于常用的字体组合,看看我们的网页安全字体组合


字体样式

font-style属性主要用于指定斜体文本。

这个属性有三个值:

  • 正常 - 该文本是正常显示
  • 斜体 - 该文本以斜体显示
  • 斜 - 该文本是“倾斜”(斜非常相似,斜体,但不支持)

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}
试一试»

字体大小

font-size属性设置文本的大小。

能够管理文本大小是在网页设计中很重要的。 但是,你不应该使用的字体大小调整,使段落看起来像标题,或标题看起来像段落。

始终使用正确的HTML标记,像<H1> - <H6>的标题和<p>的段落。

字体大小值可以是绝对或相对尺寸。

绝对规模:

  • 设置文本到指定尺寸
  • 不允许用户更改文字大小在所有浏览器(坏的无障碍原因)
  • 当输出的物理尺寸是已知的绝对大小是有用

相对大小:

  • 相对于周围的元素的大小设置
  • 允许用户改变浏览器中的文本大小
注意注意:如果不指定字体大小,正常文字的默认大小,如段落,是16像素(16像素= 1EM)。

设置字体大小随着像素

设置与像素的文本大小为您提供了文本大小完全控制:

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}
试一试»

提示:如果您使用的像素,你仍然可以使用缩放工具来调整整个页面。


设置字体大小的EM

为了让用户调整文本(在浏览器菜单),许多开发人员使用EM而不是像素。

的青霉大小单位由W3C推荐。

1em的是等于当前字体大小。 在浏览器的默认字体大小为16像素。 因此,1EM的默认大小为16像素。

像素/ 16 =青霉:大小可以从使用此公式的像素青霉计算

h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}
试一试»

在上面的例子中,在电磁文本大小是相同的像素前面的例子。 然而,随着新兴市场的大小,也可以在所有浏览器调整文字的大小。

不幸的是,仍与旧版本的IE的一个问题。 文本变得比它应该何时作出小于它应该何时作出更大更大和更小。


使用百分比和EM的组合

在所有浏览器上运行的解决方案,以百分比设置默认字体大小为<body>元素:

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}
试一试»

我们的代码现在的伟大工程! 它显示在所有浏览器相同的文字大小,并允许所有的浏览器来放大或调整的文字!


字体粗细

font-weight属性指定字体的粗细:

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}
试一试»

字体变

font-variant属性指定是否文本应以小型大写字体显示。

在一个小型大写字体,所有小写字母转换为大写字母。 然而,转换大写字母出现在较小的字体大小比在文本原始大写字母。

p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}
试一试»

例子

更多示例

在一个声明中的所有字体属性
这个例子演示了如何使用简写属性来设置所有的字体属性在一个声明。


自测练习用!

练习1» 练习2» 练习3» 练习4» 练习5»


所有的CSS字体属性

Property Description
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-weight Specifies the weight of a font