如何設置HTML頁面中文本的字體

時間 2019-11-19

標籤如何設置 html 頁面文本字體欄目 HTML 简体版

原文原文鏈接

字體屬性介紹

CSS中的字體屬性是幹什麼的呢？字體字體確定和字體有關咯，就是設置HTML頁面中文本的字體，
CSS中經常使用的字體屬性有幾種呢，筆者給你們梳理了下，比較經常使用的一共有5種，今天咱們就看看這5種能給文本的字體帶來什麼效果呢。
CSS 字體屬性定義文本的字體系列、大小、加粗、風格（如斜體）。
在CSS中經常使用的字體屬性有5種，如：font-style、font-weight、font-size、font-family、font。

font-style設置斜體

font-style屬性主要是給文本設置斜體用的。

font-style屬性使用表

值	描述
normal	將斜體字體恢復正常。
italic	設置字體爲斜體。

讓咱們進入font-style屬性的實踐，實踐內容如：將HTML頁面中的p標籤的文本字體設置爲斜體。
假如咱們不使用font-style屬性,可不可將p標籤中的文本字體設置爲斜體呢？，若是你們學習HTML還能夠，應該知道在HTML當中有一個i標籤，i標籤的做用就是將文本的字體設置爲斜體，自帶的功能。
有點囉嗦了哈，給初學者普及下細節哦。html
代碼塊性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>設置字體爲斜體</title>
</head>
<body>
    <p>成功不是戰勝別人，而是改變本身。</p>
    <p><i>成功不是戰勝別人，而是改變本身。</i></p>
</body>
</html>

結果圖學習

注意：使用font-style屬性能夠將i標籤自帶的斜體功能給去除掉，如：下面關鍵代碼哦。字體

<style>
        i{
            font-style: normal;
        }
    </style>

使用font-style屬性設置文本的字體爲斜體。
代碼塊網站

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>設置字體爲斜體</title>
</head>
    <style>
        p{
            font-style: italic;
        }
    </style>
<body>
   <p>成功不是戰勝別人，而是改變本身。</p>
</body>

</html>

結果圖ui

font-weight設置字體粗細

font-weight屬性是用來設置文本的字體粗細。

font-weight屬性說明表

屬性值	描述
normal	將文本的粗細恢復爲正常。
bold	字體加粗。
100到900	字體加粗

讓咱們進入font-weight屬性實踐，內容將HTML頁面中的p標籤文本字體加粗，筆者使用class屬性值爲.box將第一個p標籤文本字體加粗爲900，爲何用class屬性值爲.box呢，方便初學者理解，其他的都是同樣的，就不過多的說明了。
代碼塊code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>設置字體粗細</title>
</head>
    <style>
        .box{
            font-weight:900;
        }
    </style>
<body>
   <p class="box">成功不是戰勝別人，而是改變本身。</p>
    <p>成功不是戰勝別人，而是改變本身。</p>
</body>

</html>

結果圖orm

font-size設置字體大小

font-size屬性就是設置文本的字體大小，因爲font-size屬性值比較單一，就不用font-size屬性說明表解釋了，font-size屬性值是px爲單位。htm
讓咱們進入font-size屬性的實踐，實踐內容如：將HTML頁面中的p標籤文本字體大小設置爲14像素。
代碼塊blog

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>設置字體大小</title>
</head>
    <style>
        p{
            font-size: 14px;
        }
    </style>
<body>
   
    <p>成功不是戰勝別人，而是改變本身。</p>
</body>

</html>

結果圖

font-family 設置字體

font-family屬性給文本的字體設置風格，如：微軟雅黑、楷體、宋體....
園友都看到這裏了，相信你們都有了必定的自學能力了，就很少介紹了，直接上關鍵的代碼了，你們能夠本身嘗試各類字體哈。
代碼塊

font-family: "微軟雅黑";

注意：font-family屬性可使用多個如：font-family: "微軟雅黑","宋體",....;
細節：通常很特殊的字體，網站上面都是使用圖片來表示。是否能顯示此字體是根據用戶電腦裏面是否對應的字體文件，若是沒有該文件就會顯示爲宋體。

font字體設置的縮寫

縮寫屬性可以同時給文本設置斜體、加粗、大小、字體，每個值之間要使用逗號隔開，而且必定要有順序。
讓咱們進入font字體設置縮寫實踐，實踐內容如：將p標籤中文本設置爲斜體、加粗、大小、字體。
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字體設置的縮寫</title>
</head>
    <style>
        p{
           font: italic 900 14px "微軟雅黑";
        }
    </style>
<body>
   
    <p>成功不是戰勝別人，而是改變本身。</p>
</body>

</html>