css 字體圖標更改顏色
CSS字體屬性 (CSS font properties )
Font properties in CSS is used to define the font family, boldness, size, and the style of a text.
CSS中的字體屬性用于定義字體系列 , 粗體 , 大小和文本樣式 。
Syntax:
句法:
Element {
font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}
字體樣式屬性 (font-style property )
The font-style property in CSS is used to define the style of font used for the text.
CSS中的font-style屬性用于定義用于文本的字體樣式。
Generally, there are three types:
通常,有三種類型:
Italics
斜體字
Oblique
斜
Normal
正常
Example:
例:
<!DOCTYPE html>
<html>
<head>
<style>
p.p1 {
font-style: normal;
}
p.p2 {
font-style: italic;
}
p.p3 {
font-style: oblique;
}
</style>
</head>
<body>
<p class="p1">Hello! Welcome to Include Help.</p>
<p class="p2">Hello! Welcome to Include Help.</p>
<p class="p3">Hello! Welcome to Include Help.</p>
</body>
Output
輸出量
字體大小屬性 (font-size property)
The font-size property is given in %, px, em, or any other valid CSS measurement. Using pixels, you can use the zoom tool to resize the entire page.
font-size屬性以% , px , em或任何其他有效CSS度量給出。 使用像素,可以使用縮放工具來調整整個頁面的大小。
Example:
例:
<!DOCTYPE html>
<head>
<style>
h3 {
font-size: 40px;
}
</style>
</head>
<html>
<body>
<h3>Hello! Welcome to include Help.</h3>
</body>
</html>
Output
輸出量
The text inside <h3> will be 40px in size.
<h3>中的文本大小為40px 。
字體家族屬性 (font-family property)
This is for defining the family's name.
這是用于定義家庭的名稱。
You can start with the font you want, and end with a generic family if no other fonts are available, the browser picks a similar font in the generic family.
您可以從所需的字體開始,如果沒有其他可用的字體,則以通用系列結束,瀏覽器會在通用系列中選擇相似的字體。
Example:
例:
<!DOCTYPE html>
<head>
<style>
p {
font-weight: bold;
font-size: 20px;
font-family: Arial, sans-serif;
}
</style>
</head>
<html>
<body>
<p>Hello! Welcome to include Help</p>
</body>
</html>
Output
輸出量
字體變化屬性 (font-variant property)
font-variant property in CSS is used to set the variant of the text normal or small-caps.
CSS中的font-variant屬性用于設置正常或小寫字母的文本變體。
Example:
例:
<!DOCTYPE html>
<head>
<style>
.element-one {
font-variant: normal;
}
</style>
</head>
<html>
<body>
<p class="element-one">Hello! Welcome to include Help.</p>
</body>
</html>
Output
輸出量
字體速記 (The Font Shorthand)
You can have all your font styles in one element with the font shorthand. Just use the font property, and put your values in the correct order.
您可以使用字體速記將所有字體樣式集中在一個元素中。 只需使用font屬性,然后按正確的順序放置值即可。
Syntax:
句法:
element
{
font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}
Example:
例:
p {
font-weight: bold;
font-size: 20px;
font-family: Arial, sans-serif;
}
However, with the font shorthand it can be condensed as follows,
但是,使用字體速記可以將其壓縮如下,
<!DOCTYPE html>
<head>
<style>
p {
font: bold 20px Arial, sans-serif;
}
</style>
</head>
<html>
<body>
<p>Hello! Welcome to include Help.</p>
</body>
</html>
Output
輸出量
翻譯自: https://www.includehelp.com/code-snippets/changing-font-in-css.aspx
css 字體圖標更改顏色