css 字体图标更改颜色_在CSS中更改字体

最新推荐文章于 2024-07-06 00:34:38 发布

cumtb2002

最新推荐文章于 2024-07-06 00:34:38 发布

阅读量1.9k

点赞数

文章标签： css css3 html python java

原文链接：https://www.includehelp.com/code-snippets/changing-font-in-css.aspx

版权

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

输出量