Font Property(字體屬性) | CSS

字體實際上很大程度的影響使用者對你的網站的好感度，因為如果使用錯誤的字體的話，網頁的可讀性太低，使用者可能會想要馬上就關閉你的網頁

字體實際上很大程度的影響使用者對你的網站的好感度，我們透過範例改變字體大小、粗細和其他不同的樣式。學習利用不同字體樣式輕鬆提升你網站整體的設計感。無論你是設計愛好者還是前端工程師，掌握 CSS 字體屬性將使你能夠在網頁中創建可讀性強和吸引力強的文字。

Google字體

See the Pen Font Property(字體屬性)-CSS by lenrich (@lenrich) on CodePen.

範例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>字體屬性</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        line-height: 1.6em;
      }
      #welcome p span {
        /* 字體加粗 */
        font-weight: bold;
      }
      #about p span {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <div id="welcome">
      <h2 class="primary-heading">歡迎來到我的Blog</h2>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit possimus
        eius voluptatem suscipit
        <span>libero aliquam fugit voluptas delectus quia animi voluptatum</span
        >, perferendis rerum ut ducimus mollitia voluptatibus earum neque eum.
      </p>
    </div>
    <div id="about">
      <h2>關於我們</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus
        blanditiis suscipit
        <span
          >nihil ratione libero, eum excepturi enim nulla. Accusamus amet
          veniam</span
        >
        consequuntur hic doloremque vel ipsa ab voluptas, provident dolorum?
      </p>
    </div>
  </body>
</html>