Text Code-Font Code - 书目录

Text Code-Font Code

Font Code

以下字体代码的名称中包含单词“font”,例如font-size,font-stretch等等。

另请参阅文本代码,它们是名称中包含“文本”的属性,例如text-transform,text-align等等。

font

该font属性是速记代码,允许您一次设置多个字体属性。该font属性可以设置以下属性:font-style,font-variant,font-weight,font-size,line-height,和font-family。

<p style="font:italic small-caps bold 18px/24px Garamond, Georgia, Times, Serif;width:200px;">Sample text to demonstrate HTML font code.</p>

font-family

如果您只需设置一个或两个字体属性,则可能更愿意使用显式字体属性,而不是上面概述的速记属性。

该font-family属性可能是最常见的字体属性。它允许您设置字体系列 – 通常简称为“字体”(例如,“如何更改字体?”)。

<p style="font-family:Garamond, Georgia, Times, Serif">The font-family property enables you to change the font.</p>

font-size

要更改字体的大小,可以使用该font-size属性。此属性接受各种值,包括像素大小,点数,百分比值等。以下是使用不同值设置字体大小的一些示例:

<p style="font-size:12px;">Font size using pixels (12px).</p>
<p style="font-size:12pt;">Font size using points (12pt).</p>
<p style="font-size:130%;">Font size using a percentage value (130%).</p>
<p style="font-size:medium;">Font size using an absolute value (medium).</p>
<p style="font-size:larger">Font size using a relative value (larger).</p>

font-weight

要将文本设置为粗体,请使用该font-weight属性。虽然这种字体代码可以让你指定不同的粗体,但大多数浏览器只能渲染两个层次(粗体和正常)。因此,最常见的值是bold和normal(它会覆盖任何粗体设置)。

这里有些例子。如果您的浏览器没有正确渲染这些内容,您可能只会看到两个粗体级别。

<p style="font-weight:normal;">font-weight: normal</p>
<p style="font-weight:bold;">font-weight: bold</p>
<p style="font-weight:bolder;">font-weight: bolder</p>
<p style="font-weight:lighter;">font-weight: lighter</p>
<p style="font-weight:100;">font-weight: 100</p>
<p style="font-weight:200;">font-weight: 200</p>
<p style="font-weight:300;">font-weight: 300</p>
<p style="font-weight:400;">font-weight: 400</p>
<p style="font-weight:500;">font-weight: 500</p>
<p style="font-weight:600;">font-weight: 600</p>
<p style="font-weight:700;">font-weight: 700</p>
<p style="font-weight:800;">font-weight: 800</p>
<p style="font-weight:900;">font-weight: 900</p>

font-style

该font-style属性使您可以指定斜体和倾斜字体样式。下面的例子:

<p style="font-style:normal;">font-style:normal</p>
<p style="font-style:italic;">font-style:italic</p>
<p style="font-style:oblique;">font-style:oblique</p>
<p style="font-style:inherit;">font-style:inherit (ie, inherit style from parent element).</p>

font-size-adjust

现在我们来看一些不太常用的字体代码。首先,font-size-adjust财产。

该font-size-adjust属性缩放字体的x高度。如果您使用的字体难以在给定尺寸下阅读,则可以使用此字体代码。使用这个属性可以让你的字体更清晰。

注意:在撰写本文时,大多数浏览器都不支持此属性,因此,如果在此示例中看不到任何区别,请不要感到惊讶。

<p>This text does not use font-size-adjust.</p>
<p style="font-size-adjust: 0.58;">This text has a font-size-adjust value of 0.58.</p>

font-stretch

您可以使用该font-stretch属性水平拉伸字体。下面的例子。

注意:在撰写本文时,大多数浏览器都不支持此属性,因此,如果在此示例中看不到任何区别,请不要感到惊讶。

<p>This text does not use font-size-adjust.</p>
<p style="font-stretch:wider;">This text uses font-stretch:wider.</p>
<p style="font-stretch:narrower;">This text uses .</p>
<p style="font-stretch:ultra-condensed;">This text uses font-stretch:narrower.</p>
<p style="font-stretch:extra-condensed;">This text uses font-stretch:extra-condensed.</p>
<p style="font-stretch:condensed;">This text uses font-stretch:condensed.</p>
<p style="font-stretch:semi-condensed;">This text uses font-stretch:semi-condensed.</p>
<p style="font-stretch:semi-expanded;">This text uses font-stretch:semi-expanded.</p>
<p style="font-stretch:expanded;">This text uses font-stretch:expanded.</p>
<p style="font-stretch:extra-expanded;">This text uses font-stretch:extra-expanded.</p>
<p style="font-stretch:ultra-expanded;">This text uses font-stretch:ultra-expanded.</p>

font-variant

要以小型大写字体呈现文字,请使用该font-variant属性。例:

<p style="font-variant:small-caps;">Small Caps Can Be Useful... But Don't OverDo It!.</p>

另请参阅文本代码列表。

133766

 

英语原文:http://www.html.am/html-codes/text/font-code.cfm 由工具自动翻译,由书目录整理