Javascript通過標籤獲取子元素

| | | | | | | | | | | | | | | | | | | | | | | |

要創建 CSS 粗體文本效果,您必須使用 font-weight 屬性。 font-weight 屬性確定字體的“粗細”,或字體顯示的粗體程度。您可以使用關鍵字或數字值來指示 CSS 一段文本的粗體程度。

作為開發人員,在設計網站時,有時我們希望引起對某事的注意.我們有幾種方法可以做到這一點。最簡單的方法是增加要突出顯示的文本的字符權重。這指的是使文本顯示為粗體。

在本文中,我們將討論粗細字體,如何定義它,並提供屬性的不同可能值的說明。

CSS Fat: A Guide

font-weight 屬性集是粗體文本在屏幕上的顯示方式。你可以用單詞 - 鍵或數值來表示 CSS 文本應該一起顯示多少粗體

CSS font-weight 屬性的語法如下:

weightOfFont 值是要用於應用樣式的元素的字體的粗細。

font-weight 屬性接受幾種不同的值,具體取決於您要為特定元素設置的字體粗細。

CSS 粗體縮放

將您的字體系列想像為具有 100 到 1000 的粗體縮放比例。數字越大,字符越粗

對您最喜歡的字體系列進行一些研究。這將使您可以確保結果在您的網站上與您想要的一樣淺或粗。一些字體系列不使用全尺寸。

以下代碼顯示了一種流行的稱為“Arial”的字體在使用數字和單詞時可以達到的亮度和暗度 - 鍵:

更大膽更清楚:它們實際上是什麼意思?

這裡主要需要指出的是,lighter and bolder並不是直譯。加粗並不意味著“比粗體更粗”

其實更粗更清晰在這種情況下,意味著它們相對於父元素的粗體或清晰程度。因此,當我們做一個更大膽的子元素時,它們的相對字體將比它們的父元素更暗 - 較亮的字體也是如此。

相對字符權重如下:

< td> 實際字體粗細 td> < td> 400
相對字符權重
thin 100
normal
粗體 700
900

所以,我們可以使用 weight font: bold 屬性來設置e 一段文字的粗細字體為 800。當孩子相對於父母的粗細較粗時,使用上表來了解他有多胖。

例如,假設我有一個孩子有一個字體粗細為 400 的父代。如果我將 font-weight 值放在較粗的子代上,則子代上的粗細字體變為 700。

這是因為與子代相比,字體較暗比父級重。如果父級已經盡可能暗或盡可能亮,這些屬性值“Äã,Äã什麼都不做。

示例 CSS 字體粗細

假設您正在設計一個網站西雅圖郵票俱樂部,一家當地的郵票公司。我們要求做的郵票公司Who are - we 在他們的網站A About 上以粗體顯示。這會引起訪問者對標題的注意。

郵票俱樂部要求我們在他們的網站上添加一段文字,其中包含俱樂部的歷史。此文本塊應以正常字體粗細顯示。俱樂部想要引起觀眾注意的一些短語應該以粗體顯示

我們可以使用以下代碼創建這個文本塊,並帶有一些鼓勵的短語:

點擊樣式 圖片 button 在上面的代碼編輯器中查看我們的HTML/CSS代碼的輸出。

在我們的 HTML 文件中,我們定義了一個包含文本的

段落; .標記我們還在 中包含了一些句子。標籤,我們鼓勵在我們的 CSS 中

接下來,在我們的 CSS 文件中,我們定義了一個樣式規則,它定義了每個 < /a> 標籤 加粗。這意味著包含在 標記中的文本比父元素顯示得更粗。

當我們運行我們的代碼時,我們的段落以正常的字體寬度顯示,而包含在 標記中的句子以粗體顯示.在此示例中,表達式 welcomes everyone250 個成員 包含在 標記中。

帶有可變字符的粗體 css 文本

最新級別的 CSS 字體為我們提供了一些新字體。它們被稱為可變字符,可以將一個數字在 1 到 1000 之間作為字符寬度。瀏覽器支持直到 2020 年 5 月才完全實現,所以它們是相當新的。如果您想了解有關可變字體的更多信息,請查看此 rel = "noopener"> l ` 介紹。

結論

在本教程中,我們已經討論了CSS font -weight 屬性以及它如何影響我們字體的粗度。

我們已經了解到,更粗和更輕的粗細意味著相對於父元素的字體粗細的字體粗細。基本上,我們查看了字符權重範圍以查看文本的外觀。你很快就會成為專業的字體權重

要了解有關 CSS 編碼的更多信息,請閱讀我們的指南如何學習 CSS 。您可以閱讀我們的指南如果您想在不依賴 CSS 的情況下使文本變為粗體,如何在 HTML 中使文本變為粗體。