文字相关的属性

最新推荐文章于 2024-09-02 20:00:48 发布

原创最新推荐文章于 2024-09-02 20:00:48 发布 · 912 阅读

0 ·

CC 4.0 BY-SA版权

CSS新手学习专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了CSS中的字体属性，包括文字样式（font-style）、文字粗细（font-weight）、文字大小（font-size）以及文字字体（font-family）。通过具体示例展示了如何设置这些属性来改变网页文本的表现。

一、font-style属性（文字样式）：

主要记住两个值：normal与italic

1.normal:正常的，就是默认状态下的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文字相关的属性</title>
    <base target="_self">
    <style type="text/css">
        p{
            font-style: normal;
        }
    </style>
</head>
<body>
    <p>我是段落</p>
</body>
</html>

2.italic:倾斜的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文字相关的属性</title>
    <base target="_self">
    <style type="text/css">
        p{
            font-style: italic;
        }
    </style>
</head>
<body>
    <p>我是段落</p>
</body>
</html>

二、font-weight属性（文字粗细）：

最重要的值为：bord（粗）、border（很粗）。

1.bord与border用法相同

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文字相关的属性</title>
    <base target="_self">
    <style type="text/css">
        p{
            font-weight: ;
        }
    </style>
</head>
<body>
    <p>我是段落</p>
</body>
</html>

三、font-size属性（文字的大小）：

可以自己直接输入所要的文字的大小，如：100px、20px.......

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文字相关的属性</title>
    <base target="_self">
    <style type="text/css">
        p{
            font-size: 100px;
        }
    </style>
</head>
<body>
    <p>我是段落</p>
</body>
</html>

四、font-family属性（文字字体）：

（1）中文字体：包含英文字体，可以处理和渲染英文字体。

（2）英文字体：不包含中文字体，不可以处理和渲染中文字体。

遇到的四种情况：

<style>

{

font-family:"英文字体"；

}

</style>

<body>

<p>abc我是段落abc</p>

</body>

文中的abc会被渲染成“英文字体”，但是“我是段落”不会被渲染。

<style>

{

font-family:"中文字体"；

}

</style>

<body>

<p>abc我是段落abc</p>

</body>

文中的abc和“我是段落”都会被渲染成“中文字体”。

<style>

{

font-family:"中文字体","英文字体"；

}

</style>

<body>

<p>abc我是段落abc</p>

</body>

文中的abc和“我是段落”都会被渲染成中文字体，因为中文字体能处理中英文，所以用不到后面的备选方案“英文字体”。

<style>

{

font-family:"英文字体","中文字体"；

}

</style>

<body>

<p>abc我是段落abc</p>

</body>

文中的abc会被渲染成“英文字体”，“我是段落”会被渲染成“中文字体”。因为“英文字体”只能处理渲染英文，不能渲染中文，所以当英文字体处理不了的时候，运行备选字体，备选字体“中文字体”开始进行渲染，渲染“我是段落”。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文字相关的属性</title>
    <base target="_self">
    <style type="text/css">
        p{
            font-size: 100px;
            font-family: "Times New Roman","微软雅黑";
        }
    </style>
</head>
<body>
    <p>abc我是段落abc</p>
</body>
</html>

总结：

如果你想单独处理文中的英文，那么把英文字体写在前面，中文字体写在后面。

font-family:"英文字体"，"中文字体"；

这样文中的中文和英文就分开渲染了，中文被“中文字体”渲染，英文被“英文字体”渲染。