css如何改變字體粗細-css教學-PHP中文網

首頁

web前端

css教學

css如何改變字體粗細

醉折花枝作酒筹

Jul 26, 2021 pm 03:00 PM

css

在css中，可以使用font-weight屬性來改變字體粗細，只需要給字體元素設定「font-weight:數值;」。此屬性用於設定顯示元素的文字中所使用的字體加粗。數字值400相當於關鍵字normal，700等價於bold。

css如何改變字體粗細

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

HTML中透過加入標記，或標記來設定文字的粗細。

CSS可以將文字的粗細進行了細緻的劃分，而且，還可以將本身是粗體的文字，變為正常的粗細顯示。

<html>
  <head>
    <title>文字粗细</title>
    <style>
      h1 span {
        font-weight: lighter;
      }
      span {
        font-size: 30px;
      }
      span.one {
        font-weight: 100;
      }
      span.two {
        font-weight: 200;
      }
      span.three {
        font-weight: 300;
      }
      span.four {
        font-weight: 400;
      }
      span.five {
        font-weight: 500;
      }
      span.sex {
        font-weight: 600;
      }
      span.seven {
        font-weight: 700;
      }
      span.eight {
        font-weight: 800;
      }
      span.nine {
        font-weight: 900;
      }
      span.ten {
        font-weight: bold;
      }
      span.eleven {
        font-weight: normal;
      }
    </style>
  </head>

  <body>
    <h1 id="文字-span-粗-span-体">文字<span>粗</span>体</h1>
    <span class="one">文字粗细：100</span>
    <span class="two">文字粗细：200</span>
    <span class="three">文字粗细：300</span>
    <span class="four">文字粗细：400</span>
    <span class="five">文字粗细：500</span>
    <span class="six">文字粗细：600</span>
    <span class="seven">文字粗细：700</span>
    <span class="eight">文字粗细：800</span>
    <span class="nine">文字粗细：900</span>
    <span class="ten">文字粗细：bold</span>
    <span class="eleven">文字粗细：normal</span>
  </body>
</html>

文字的粗細在CSS中通過屬性：font-weight設置，如上程式碼幾乎涵蓋了所有的文字粗細值，並且，可以是本身是粗體的字體，變成正常粗體。

推薦學習：css影片教學

以上是css如何改變字體粗細的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn