閱讀(10.6k) 書簽贊(3) 我要糾錯

CSS 字體

2018-10-31 11:41 更新

CSS可以選擇字體系列，設(shè)置字體大小，控制字體重量，并添加字體樣式。

Font Family

font-family 屬性按照首選項的順序指定字體。瀏覽器以第一個字體開始，并使用可用的字體。

CSS定義了一些可用的通用字體。瀏覽器用于呈現(xiàn)它們的確切字體可以有變化。通用字體系列的摘要可以在下表中找到。

通用字體	示例實現(xiàn)字體
serif	Times
sans-serif	Helvetica
cursive	Zapf-Chancery
fantasy	Western
monospace	Courier

以下代碼顯示應(yīng)用于文本塊的font-family屬性。

p  {
    font-family: "HelveticaNeue  Condensed", monospace;
}

如果HelveticaNeue Condensed在您的系統(tǒng)中不可用，則使用通用等寬。

font-size

font-size 屬性設(shè)置字體的大小。此屬性的允許值在以下列表中描述。

xx-small
x-small
small
medium
large
x-large
xx-large
設(shè)置字體大小。瀏覽器負責(zé)決定每個值表示的確切大小。
smaller
larger
相對于父元素的字體大小設(shè)置字體大小。
length
使用CSS長度值精確設(shè)置字體大小。
%
將字體大小設(shè)置為父元素的字體大小的百分比。

以下代碼顯示了 font-size 屬性。

<html>
<head>
<style type="text/css">


p.absoluteone {
  font-size: xx-small;
}

p.absolutetwo {
  font-size: x-small;
}

p.absolutethree {
  font-size: small;
}

p.absolutefour {
  font-size: medium;
}

p.absolutefive {
  font-size: large;
}

p.absolutesix {
  font-size: x-large;
}

p.absoluteseven {
  font-size: xx-large;
}

p.pixelsone {
  font-size: 9px;
}

p.pixelstwo {
  font-size: 12px;
}

p.pixelsthree {
  font-size: 14px;
}

p.pixelsfour {
  font-size: 18px;
}

p.pixelsfive {
  font-size: 24px;
}

p.pixelssix {
  font-size: 36px;
}

p.pixelsseven {
  font-size: 48px;
}

p.picaone {
  font-size: 1pc;
}

p.picatwo {
  font-size: 2pc;
}

p.picathree {
  font-size: 3pc;
}

p.picafour {
  font-size: 4pc;
}

p.pointone {
  font-size: 9pt;
}

p.pointtwo {
  font-size: 12pt;
}

p.pointthree {
  font-size: 14pt;
}

p.pointfour {
  font-size: 18pt;
}

p.pointfive {
  font-size: 24pt;
}

p.pointsix {
  font-size: 36pt;
}

p.pointseven {
  font-size: 48pt;
}

p.relativeone {
  font-size: smaller;
}

p.relativetwo {
  
}

p.relative {
  font-size: larger;
}

p.emone {
  font-size: 1em;
}

p.emtwo {
  font-size: 2em;
}

p.emthree {
  font-size: 3em;
}

p.emfour {
  font-size: 4em;
}

p.exone {
  font-size: 1ex;
}

p.extwo {
  font-size: 2ex;
}

p.exthree {
  font-size: 3ex;
}

p.exfour {
  font-size: 4ex;
}

p.exfive {
  font-size: 5ex;
}

p.exsix {
  font-size: 6ex;
}

p.exseven {
  font-size: 7ex;
}

p.percentone {
  font-size: 50%;
}

p.percenttwo {
  font-size: 75%;
}

p.percentthree {
  font-size: 100%;
}

p.percentfour {
  font-size: 150%;
}

p.percentfive {
  font-size: 200%;
}

p.percentsix {
  font-size: 400%;
}
</style>

</head>

<body>

  <div class="page">

    <h1>Font Sizes</h1>

    <div class="column">

      <h2>Absolute</h2>
      <p class="absoluteone">xx-small</p>
      <p class="absolutetwo">x-small</p>
      <p class="absolutethree">small</p>
      <p class="absolutefour">medium</p>
      <p class="absolutefive">large</p>
      <p class="absolutesix">large</p>
      <p class="absoluteseven">large</p>

    </div>
    <div class="column">

      <h2>Pixels</h2>
      <p class="pixelsone">9 px</p>
      <p class="pixelstwo">12 px</p>
      <p class="pixelsthree">14 px</p>
      <p class="pixelsfour">18 px</p>
      <p class="pixelsfive">24 px</p>
      <p class="pixelssix">36 px</p>
      <p class="pixelsseven">48 px</p>

    </div>
    <div class="column">

      <h2>Points</h2>
      <p class="pointone">9 pt</p>
      <p class="pointtwo">12 pt</p>
      <p class="pointthree">14 pt</p>
      <p class="pointfour">18 pt</p>
      <p class="pointfive">24 pt</p>
      <p class="pointsix">36 pt</p>
      <p class="pointseven">48 pt</p>

    </div>
    <div class="column">

      <h2>Picas</h2>
      <p class="picaone">1 pc</p>
      <p class="picatwo">2 pc</p>
      <p class="picathree">3 pc</p>
      <p class="picafour">4 pc</p>

    </div>

    <hr />

    <div class="column">

      <h2>Relative Sizes</h2>
      <p class="relativeone">smaller</p>
      <p class="relativetwo">no style</p>
      <p class="relativethree">larger</p>

    </div>
    <div class="column">

      <h2>Ems</h2>
      <p class="emone">1em</p>
      <p class="emtwo">2em</p>
      <p class="emthree">3em</p>
      <p class="emfour">4em</p>

    </div>
    <div class="column">

      <h2>Exs</h2>
      <p class="exone">1ex</p>
      <p class="extwo">2ex</p>
      <p class="exthree">3ex</p>
      <p class="exfour">4ex</p>
      <p class="exfive">5ex</p>
      <p class="exsix">6ex</p>
      <p class="exseven">7ex</p>

    </div>
    <div class="column">

      <h2>Percents</h2>
      <p class="percentone">50%</p>
      <p class="percenttwo">75%</p>
      <p class="percentthree">100%</p>
      <p class="percentfour">150%</p>
      <p class="percentfive">200%</p>
      <p class="percentsix">400%</p>

    </div>

  </diV>

</body>
</html>

font-weight

您可以使用font-weight屬性設(shè)置字體的權(quán)重。其可能的值為：

normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

以下代碼使用 font-weight 和 font-style 屬性。

<!DOCTYPE HTML>
<html>
<head>
<style>
p.one {
  font-weight: normal;
}

p.two {
  font-weight: bold;
}

p.three {
  font-weight: normal;
}

p.three span {
  font-weight: bolder;
}

p.four {
  font-weight: bold;
}

p.four span {
  font-weight: lighter;
}

p.five {
  font-weight: 100;
}

p.six {
  font-weight: 200;
}

p.seven {
  font-weight: 300;
}

p.eight {
  font-weight: 400;
}

p.nine {
  font-weight: 500;
}

p.ten {
  font-weight: 600;
}

p.eleven {
  font-weight: 700;
}

p.twelve {
  font-weight: 800;
}

p.thirteen {
  font-weight: 900;
}

.column {
  width: 150px;
  float: left;
  margin-right: 30px;
}
</style>
</head>

<body>
  <h1>Font Weight</h1>

  <div class="column">
    <p class="one">normal</p>
    <p class="two">bold</p>
    <p class="three">
      <span>bolder</span>.
    </p>
    <p class="four">
      <span>lighter</span>.
    </p>
  </div>

  <div class="column">
    <p class="five">100</p>
    <p class="six">200</p>
    <p class="seven">300</p>
    <p class="eight">400</p>
    <p class="nine">500</p>
    <p class="ten">600</p>
    <p class="eleven">700</p>
    <p class="twelve">800</p>
    <p class="thirteen">900</p>
  </div>

</body>
</html>

font-style

font-style屬性選擇normal，italic和oblique字體。

斜體字體和斜體字體之間有區(qū)別，但是區(qū)別對文本的外觀沒有什么區(qū)別。

以下代碼使用 font-weight 和 font-style 屬性。

p.one {
  font-style: normal;
}

p.two {
  font-style: italic;
}

p.three {
  font-style: oblique;
}

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">

p.one {
  font-style: normal;
}

p.two {
  font-style: italic;
}

p.three {
  font-style: oblique;
}
</style>

</head>

<body>

  <p class="one">This is a normal font</p>
  <p class="two">This is an italic font</p>
  <p class="three">This is an oblique font</p>

</body>
</html>

屬性	描述	CSS
@font-face	從web加載字體	3
font-family	設(shè)置文本的字體系列	1
font-size-adjust	設(shè)置在發(fā)生字體回退時文本的可讀性	3
font-size	設(shè)置文本的字體大小	1
font-stretch	為字體系列選擇正常，濃縮或展開的面	3
font-style	設(shè)置文本的字體樣式	1
font-variant	設(shè)置為使用小寫字體	1
font-weight	設(shè)置字體的粗細	1
font	字體的簡寫屬性	1

CSS 字體

CSS可以選擇字體系列，設(shè)置字體大小，控制字體重量，并添加字體樣式。

Font Family

font-size

font-weight

font-style

相關(guān)屬性

推薦文章

推薦教程

推薦課程

CSS可以選擇字體系列，設(shè)置字體大小，控制字體重量，并添加字體樣式。