CSS基礎-文字樣式

字是網頁展示的重要內容之一，所以對文字的修飾也是CSS重點關注的一部分， CSS提供了以下常用的樣式屬性來修飾文字。

color 屬性

color 用來設置文字顏色。

設置方式支持以下幾種格式

英語顏色單詞形式，如: red（紅）、black（黑）、orange（橙色）等。

<style>
  .box {
    color: red;
  }
</style>


<div class="box">文字顏色</div>

十六進制表示法，設計軟件中通用的表示方法。
例如：ff00000; ff 即為十進制255；每種顏色分為 0~255的數字。
如果表示顏色值重復例如：#ffaabb 可以簡寫為#fab.。
黑色為 #000 ，白色為 #fff。
以#ff0000為例，兩兩分組，分別表示三原色：紅、綠、藍。

<style>
  .box {
    color: #ff0000;
  }
  .box1 {
    color: #f00;
  }
</style>


<div class="box">文字顏色</div>
<div class="box1">簡寫形式</div>

RGB 表示法
例如: color: rgb(255,0,0); rgb 內部的三個值，依次代表三原色紅、綠、藍。
其中 rgb(0,0,0) 代表黑色， rgb(255,255,255) 表示白色。

<style>
  .box {
    color: rgb(255, 0, 0);
  }
</style>
<div class="box">文字顏色</div>

RGBA 表示法，在RGB的表示方法的基礎上增加了透明度（最后一個參數代表透明度）。0-表示透明 1-表示實心。透明度是介于[0,1]之間的值。
RGBA 從 IE9開始兼容。

<style>
.box {
  color: rgba(255, 0, 0, 0.5);
}
</style>




<div class="box">文字顏色</div>

font-size 屬性

font-size 屬性用來設置字體大小，單位通常為px 也可以為em,rem

單位的解釋

px：像素
em: 相對元素字體的倍數
rem：相對html字體的倍數，例如：html標簽設置為font-size為100px ， div 設置font-size為1.5 rem 實際表現為：150px。

<style>
  .box {
    font-size: 30px;
  }
</style>


<div class="box">文字大小</div>

font-weight 屬性

設置字體的粗細程度，常用的屬性有 normal 和 bold 兩個值。

可以用以下值表示，也可以用數字表示。

值	意義
normal	正常粗細，和400值相等
bold	加粗，與700數值相等
lighter	比正常粗細還細，不常用
bolder	比加粗還粗，不常用
100 200 300 400 500 600 700 800 900	使用數字定義字體粗細
inherit	從父元素繼承字體粗細

<style>
.box_normal {
  font-weight: normal;
}
.box_bold {
  font-weight: bold;
}


.box_lighter {
  font-weight: lighter;
}


.box_bolder {
  font-weight: bolder;
}


.box_number {
  font-weight: 600;
}
</style>


<body>
  <div class="box_normal">font-weight演示：正常粗細</div>
  <div class="box_bold">font-weight演示，加粗</div>
  <div class="box_lighter">font-weight演示，更細</div>
  <div class="box_bolder">font-weight演示， 更粗</div>
  <div class="box_number">font-weight演示， 數字</div>
</body>

font-style 屬性

設置字體的傾斜程度

值	意義
normal	正常字體，不帶傾斜效果
italic	傾斜字體（常用，使用傾斜字體）
oblique	傾斜字體（用常規字體模擬傾斜，不常用）

<style>
  .box1 {
    font-style: normal;
  }
  .box2 {
    font-style: italic;
  }
  .box3 {
    font-style: oblique;
  }
</style>
<body>
  <div class="box1">正常字體</div>
  <div class="box2">傾斜字體</div>
  <div class="box3">傾斜字體2</div>
</body>

text-decoration 屬性

設置文本的修飾線的樣式

示例	意義
none	無線(a標簽去除下劃線會用到)
underline;	下劃線
line-through;	刪除線
…等等	還有很多，可自行百度

<style>
  .decoration-none {
    text-decoration: none;
  }
  .decoration-underline {
    text-decoration: underline;
  }
  .decoration-line-through {
    text-decoration: line-through;
  }
</style>
<body>
  <div class="decoration-none">無線修飾</div>
  <div class="decoration-underline">下劃線</div>
  <div class="decoration-line-through">刪除線</div>
</body>

font-family 屬性

指定使用的字體族，操作系統一般自帶很多字體；

例如：window操作系統中的 ‘微軟雅黑’ ，黑體等。

字體文件的格式有很多，比如 eot,woff2,woff,ttf,svg等。

font-family 可以一次指定多個字體，后面的字體屬于后備字體，只有前面的字體沒有找到，才會使用后面的字體。

<style>
  div {
      font-family: serif, "Time New Roman", "微軟雅黑"
  }
</style>
<body>
  <div>字體</div>
</body>

自定義字體

某些時候，我們的字體比較個性化，或者我們的字體是一個圖標字體（一種用符號表示圖片的方式）。那么此時，需要我們使用 @font-face 自定義字體

自定義的字體一般是隨著網頁發布在服務器端，操作系統中并沒有。

推薦一個比較好用的字體庫網站：https://www.iconfont.cn/（具體使用方式請自行百度）。

融界2024年1月16日消息，據國家知識產權局公告，中信銀行股份有限公司申請一項名為“一種基于iText的支持生僻字轉換方法及系統”的專利，公開號CN117408230A，申請日期為2023年10月。

專利摘要顯示，本發明提供了一種基于iText的支持生僻字轉換方法及系統，涉及人工智能技術領域。其中，所述方法包括：獲得生僻字字庫；獲得常規字字庫；將所述生僻字字庫與所述常規字字庫進行組合，獲得字庫集合；根據所述字庫集合對HTML進行字體樣式設定，獲得HTML信息；將所述字庫集合設置到iText中，調用所述iText對所述HTML信息進行PDF轉換，獲得轉換文件。解決了現有技術中存在遇到生成含有生僻字的HTML轉換PDF場景時，無法正常完成生僻字轉換，出現生僻字變為亂碼，且使用升級現有中文字字庫的方法不能隨時新增生僻字，靈活性差的技術問題。

本文源自金融界

謂HSL

HSL色彩模式：就是色調(Hue)、飽和度(Saturation)、亮度(Lightness)三個顏色通道的改變以及它們相互之間的疊加來獲得各種顏色，色調(Hue)色調最大值360，飽和度和亮度有百分比表示0-100%之間。

因為人們看到顏色第一時間會產生“這是什么顏色？深淺如何？明暗如何？”這個疑問不是這是多少紅加多少綠多少藍混合而成的顏色，所以HSL色彩模式是人類對顏色最直接的感知。
HSL(H,S,L)

取值：

H：
Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360
S：
Saturation(飽和度)。取值為：0.0% - 100.0%
L：
Lightness(亮度)。取值為：0.0% - 100.0%

兼容性：

HSL被現代瀏覽器較好的支持，而且不需要任何前綴，IE6-IE7不支持。IE8支持該方式。

實例1:在css中直接使用hsl值

<style>.test{background-color:hsl(360,50%,50%);}</style>

實例2：使用Js修改dom時指定hsl值，以亮度為例
html:

    <style>        body {            padding: 100px;        }         #ex1Slider .slider-selection {            background: #BABABA;        }    </style>    <div class="form">        <div class="form-group">            <label for="">亮度：</label>            <input id="ex1" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="15" />        </div>    </div>

//亮度$('#ex1').slider().on('change', function (e) {    var newValue=e.value.newValue;    console.info(newValue);    $(document.body).css({        backgroundColor: 'hsl(360,50%,' + newValue + '%)'    });});

完整代碼：

<!doctype html><html lang="zh-CN"><head><title>動態hsl調整背景色</title><meta name="Generator" content="Zoomla!逐浪?CMS"><meta name="Author" content="去上云73ic.com"><meta name="Others" content="字體呈現基于逐浪字庫f.ziti163.com"><meta name="Keywords" content=""><meta name="Description" content=""><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  <link href="https://cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <script src="https://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script></head><body><style>body {    padding: 100px;}#ex1Slider .slider-selection {background: #BABABA;}</style><h1>動態hsl調整背景色</h1><div class="form">    <div class="form-group">        <label for="">亮度：</label>        <input id="ex1" data-slider-id="ex1Slider" type="text"               data-slider-min="0" data-slider-max="100" data-slider-step="1"               data-slider-value="15" />    </div></div><script>//亮度$('#ex1').slider().on('change', function (e) {    var newValue=e.value.newValue;    console.info(newValue);    $(document.body).css({        backgroundColor: 'hsl(360,50%,' + newValue + '%)'    });});</script>  </body></html>

效果如下：

實例3：修改多個值：
html:

<style>        body {            padding:100px;        }        .form-group {            margin-bottom:50px;        }        #ex1Slider .slider-selection {            background: #BABABA;        }    </style>    <div class="form">        <div class="form-group">            <label for="">色?調：</label>            <input id="Hue" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="360" data-slider-step="1"                   data-slider-value="180" />        </div>        <div class="form-group">            <label for="">飽和度：</label>            <input id="Saturation" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="50" />        </div>        <div class="form-group">            <label for="">亮?度：</label>            <input id="Lightness" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="50" />        </div>    </div>

js:

//色調$('#Hue').slider().on('change', function (e) {    showColor();});//飽和度$('#Saturation').slider().on('change', function (e) {    showColor();});//亮度$('#Lightness').slider().on('change', function (e) {    showColor();});//統一顯示顏色function showColor() {    var h=$('#Hue').slider('getValue');    var s=$('#Saturation').slider('getValue');    var l=$('#Lightness').slider('getValue');    var value='hsl(' + h + ',' + s + '%,' + l + '%)';    console.info(value);    $(document.body).css({        backgroundColor:value    });}showColor();

完整代碼：

<!doctype html><html lang="zh-CN"><head><title>新建HTML</title><meta name="Generator" content="Zoomla!逐浪?CMS"><meta name="Author" content="去上云73ic.com"><meta name="Others" content="字體呈現基于逐浪字庫f.ziti163.com"><meta name="Keywords" content=""><meta name="Description" content=""><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  <link href="https://cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <script src="https://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script></head><body><h1>動態hsl調整背景色@多值</h1> <style>        body {            padding:100px;        }        .form-group {            margin-bottom:50px;        }        #ex1Slider .slider-selection {            background: #BABABA;        }    </style>    <div class="form">        <div class="form-group">            <label for="">色?調：</label>            <input id="Hue" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="360" data-slider-step="1"                   data-slider-value="180" />        </div>        <div class="form-group">            <label for="">飽和度：</label>            <input id="Saturation" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="50" />        </div>        <div class="form-group">            <label for="">亮?度：</label>            <input id="Lightness" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="50" />        </div>    </div> <script>//色調$('#Hue').slider().on('change', function (e) {    showColor();});//飽和度$('#Saturation').slider().on('change', function (e) {    showColor();});//亮度$('#Lightness').slider().on('change', function (e) {    showColor();});//統一顯示顏色function showColor() {    var h=$('#Hue').slider('getValue');    var s=$('#Saturation').slider('getValue');    var l=$('#Lightness').slider('getValue');    var value='hsl(' + h + ',' + s + '%,' + l + '%)';    console.info(value);    $(document.body).css({        backgroundColor:value    });}showColor();</script></body></html>

在線咨詢

上一篇：梁韋諾：在香港變局下讀金庸《香港的前途》
下一篇：必考知識點-JavaScript類型轉換（講原理）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商