网站制作教程:CSS 字体属性

你的网络首码项目网 网站建设来源:你的网络首码项目网评论131字数 1706阅读模式

在这里,我们来看看各种字体属性。这些是命名空间中的属性—那些在其名称开头包含单词的属性。fontfont

CSS字体属性使您能够更改文本的外观。例如,您可以分配字体系列、应用粗体或斜体格式、更改大小等。文章源自你的网络首码项目网-https://www.youranweb.com/254.html

字体系列

字体系列属性允许您设置字体系列。文章源自你的网络首码项目网-https://www.youranweb.com/254.html

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    font-family: Georgia, Garamond, serif;
  }
</style>

<p>This text is rendered in either georgia, garamond, or the default serif font (depending on which font the user's system has).</p>

字体系列属性接受不同字体系列的列表。这是因为,并非所有用户都会在其计算机上安装相同的字体。因此,作为设计人员/开发人员,您可以提供字体列表,从您的第一个选择开始,到您的最后一个选择结束。文章源自你的网络首码项目网-https://www.youranweb.com/254.html

因此,如果用户没有您的第一选择字体,则第二选择将用于该用户。如果他们没有第二选择,将使用第三选择,依此类推。文章源自你的网络首码项目网-https://www.youranweb.com/254.html

最好将最后一个选择设置为通用字体系列,例如or(具体取决于您是否需要带衬线的字体)。这样,如果用户的计算机上没有其他选择,则他们的计算机将根据您提供的通用系列选择其计算机上的字体。serifsans-serif文章源自你的网络首码项目网-https://www.youranweb.com/254.html

字体大小

使您可以设置文本的大小。有关可能值的信息,请参阅字体大小页面。文章源自你的网络首码项目网-https://www.youranweb.com/254.html

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    font-size: 30px;
  }
</style>

<p>This text is using a font size of 30 pixels.</p>

字体大小调整

此属性使您能够调整x高度以使字体更清晰。有关详细信息,请参阅字体大小调整页面。文章源自你的网络首码项目网-https://www.youranweb.com/254.html

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    font-size: 12px;
    font-size-adjust: 0.58;
  }
</style>

<p>This text is using a font-size-adjust value.</p>

字体拉伸

此属性依赖于用户的计算机具有正在使用的字体的扩展或压缩版本。有关所有可能的值,请参阅字体拉伸页。文章源自你的网络首码项目网-https://www.youranweb.com/254.html

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    font-stretch: ultra-expanded;
  }
</style>

<p>If your computer has an expanded version of the font being used, this text will be stretched.</p>

字体样式

字体样式属性用于指定斜体文本。文章源自你的网络首码项目网-https://www.youranweb.com/254.html

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    font-style: italic;
  }
</style>

<p>This text is in italics.</p>

字体变体

使您可以将文本设置为使用小写字母。文章源自你的网络首码项目网-https://www.youranweb.com/254.html

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    font-variant: small-caps;
  }
</style>

<p>This Text Is Using Small Caps.</p>

字体粗细

使您能够将文本设置为粗体。有关详细信息,请参阅字体粗细。文章源自你的网络首码项目网-https://www.youranweb.com/254.html

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    font-weight: bold;
  }
</style>

<p>This text is bold.</p>

字体属性

font属性是一个速记属性,可用于一次性设置所有字体属性。文章源自你的网络首码项目网-https://www.youranweb.com/254.html

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    font: italic small-caps bold 20px Georgia, Garamond, serif;
  }
</style>

<p>The styles for this text has been specified with the 'font' shorthand property.</p>

 文章源自你的网络首码项目网-https://www.youranweb.com/254.html 文章源自你的网络首码项目网-https://www.youranweb.com/254.html

相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网

发表评论