css文本字体形状
In the last module, we discussed text formatting. By now, you already know how to work withbackgroundsandtext formattingin CSS. Let's begin with Fonts.
在最后一个模块中，我们讨论了文本格式。 到目前为止，您已经知道如何在CSS中使用背景和文本格式。 让我们从字体开始。
Fontsset a theme for your webpage. Fonts also help you connect with your audience. UsingComic-Sanson a formal webpage makes no sense and could immediately result in a negative impression, while on a website for kids, the same font can seem playful.
字体为您的网页设置了主题。 字体还可以帮助您与观众建立联系。 在正式的网页上使用Comic-Sans没有意义，并且可能立即产生负面印象，而在儿童网站上，相同的字体似乎很有趣。
You can specify all the font properties in a single rule by using the font property.
您可以使用font属性在一个规则中指定所有字体属性。
Syntax:
句法：
font: font-style font-variant font-weight font-size font-family;
You are not required to include all the properties, consider an example:
您不需要包括所有属性，请考虑一个示例：
p { font: normal small-caps bold 18pt/22pt "Times New Roman", Courier;}
This is compatible withCSS1,CSS2andCSS3along with following Web Browsers,
它与CSS1，CSS2和CSS3以及以下Web浏览器兼容，
IE 4+
IE 4+
Firefox 1+
Firefox 1+
Opera 6+
歌剧6+
Safari 1+
Safari 1+
Chrome 1+
Chrome1+
字体家族-font-family(Font Family -font-family)
This property defines the font face to be used for the text.
此属性定义用于文本的字体。
Syntax:
句法：
font-family: font 1[, font2, ... ,fontN]
Fonts may be named specifically or a generic font family name can be used. When multiple font names are specified using commas, they are read in a descending order looking for a first match. Not all fonts are supported in all the browsers and devices, hence we should provide comma separated fonts, so that, most device/browsers are covered. The five generic font names are:
字体可以专门命名，也可以使用通用字体系列名称。 使用逗号指定多个字体名称时，将按降序读取它们，以查找第一个匹配项。 并非所有浏览器和设备都支持所有字体，因此我们应该提供逗号分隔的字体，以便涵盖大多数设备/浏览器。 五个通用字体名称是：
Serif
衬线
Sans-serif
无衬线字体
Cursive
草书
Fantasy
幻想
Monospace
等宽空间
Note:They may not render the same way in all the browsers.注意：它们在所有浏览器中的呈现方式可能都不相同。
Example:
例：
p{ font-family: Serif; }
Live Example →
现场示例→
This is compatible withCSS1,CSS2andCSS3along with following Web Browsers,
它与CSS1，CSS2和CSS3以及以下Web浏览器兼容，
IE 3+
IE 3+
Firefox 1+
Firefox 1+
Opera 4+
歌剧4+
Safari 1+
Safari 1+
Chrome 1+
Chrome1+
This property is equivalent to the face attribute of a<font>tag. As the<font>tag is deprecated in HTML5, it is adviced not to use it.
此属性等效于<font>标记的face属性。 由于HTML5中已弃用<font>标记，建议不要使用它。
字体大小-font-size(Font Size -font-size)
This is used to set the size of the font.
这用于设置字体的大小。
Syntax:
句法：
font-size: length | percentage | Size in Words | inherit;
Here Size in Words referes to → larger | smaller | xx-small | x-small | small | medium | large | x-large | xx-larger
The default ismedium. Lengths are often specified inpoints,pixels,emetc.
默认值为medium。 长度通常以点，像素，em等指定。
Percentagevalues set the font-size to a percentage of current inherited font-size.
百分比值将字体大小设置为当前继承的字体大小的百分比。
pxpixel value is device dependent and is generally equivalent to 1/96th of an inch. But that value differs for devices with different screen resolution.
px像素值取决于设备，通常等于1/96英寸。 但是对于具有不同屏幕分辨率的设备，该值会有所不同。
Another widely used unit isem. Let's try to understand this, with the help of an example: If we set thefont-sizeof the text in the body as1emand set thefont-sizeof theh1heading text as3em. Then no matter which device, the browser will make sure that the heading text is always 3 times the size of the body text.
另一个广泛使用的单位是em。 让我们试着去了解这一点，用一个例子的帮助：如果我们设置的font-size在体内作为文本的1em并设置font-size的的h1标题文本3em。 然后，无论使用哪种设备，浏览器都将确保标题文本始终是正文文本大小的3倍。
Example:
例：
#fontastic{ font-size:12px;}#fontastic-1{font-size:1em}
Live Example →
现场示例→
This is compatible withCSS1,CSS2andCSS3along with following Web Browsers,
它与CSS1，CSS2和CSS3以及以下Web浏览器兼容，
IE 3+
IE 3+
Firefox 1+
Firefox 1+
Opera 4+
歌剧4+
Safari 1+
Safari 1+
Chrome 1+
Chrome1+
字体样式和字体粗细 (Font Style & Font Weight)
font-stylesets the presentational style of the font while thefont-weightsets the weight, or relative boldness of the text.
font-style设置font-style的外观样式，而font-weight设置文本的粗细或相对粗体。
Syntax:
句法：
font-style: italic | normal | oblique | inherit;font-weight: normal | bold | bolder | lighter | 100 to 900 | inherit;
Live Example →
现场示例→
Most browsers would interpret100-500as normal text,600-900as bold. Relative values such aslighterorbolderwill increase or decrease according to the parent element's font weight.
大多数浏览器会将100-500解释为普通文本，将600-900解释为粗体。 相对值(例如，较浅或较粗)将根据父元素的字体粗细增加或减少。
This is compatible withCSS1,CSS2andCSS3along with following Web Browsers,
它与CSS1，CSS2和CSS3以及以下Web浏览器兼容，
IE 3+
IE 3+
Firefox 1+
Firefox 1+
Opera 4+
歌剧4+
Safari 1+
Safari 1+
Chrome 1+
Chrome1+
字体变体 (Font Variant)
This property sets a variation of the specified or default font-family.
此属性设置指定字体或默认字体系列的变体。
Syntax:
句法：
font-variant: normal | small-caps | inherit;
Live Example →
现场示例→
The small-caps value sets the text in small to capital. An application of the small-caps style is legal or license documents.
小写字母值将小写文本设置为大写。 小型大写字母的应用是法律或许可文件。
This is compatible withCSS1,CSS2andCSS3along with following Web Browsers,
它与CSS1，CSS2和CSS3以及以下Web浏览器兼容，
IE 3+
IE 3+
Firefox 1+
Firefox 1+
Opera 4+
歌剧4+
Safari 1+
Safari 1+
Chrome 1+
Chrome1+
翻译自: /cascading-style-sheet/css-fonts
css文本字体形状
