Web前端开发笔记——第三章 CSS语言第八节 CSS3文本文字设置

Posted 2021-10-02 晚风(●•σ )

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端开发笔记——第三章 CSS语言第八节 CSS3文本文字设置相关的知识，希望对你有一定的参考价值。

前言

本节中的仅支持CSS3中的新语法，比如文字的阴影、长文本的换行等等。

一、文本阴影

通过定义text-shadow来对文本进行阴影设置，其属性依次是水平阴影距离、垂直阴影距离、阴影的大小、阴影颜色。
如下代码，css代码：

p {
    font: italic bold 20px/2em '幼圆';
    text-shadow: 2px 2px 2px red;
}

html代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../CSS/style.css" />
</head>

<body>
    <p>
        HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。
    </p>
</body>

</html>

运行结果如下：

二、强制换行

可以通过使用word-wrap来对长文本或URL进行强制的换行，其属性默认为normal，以及break-word。
如下代码，css代码：

p {
    height: 150px;
    width: 100px;
    border: 1px solid blue;
    font: italic bold 20px/2em '幼圆';
    text-shadow: 2px 2px 2px red;
    word-wrap: break-word;
}

html代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../CSS/style.css" />
</head>

<body>
    <p>
        Hyper Text Markup Language
    </p>
</body>

</html>

运行结果如下：

三、字体设置

可以通过@font-face来使用引入自己想使用的字体，该字体在计算机上是没有的，即该字体是在@font-face中定义的。
首先在html文件的head标签内定义<style></style>标签，以@font-face开头，其中包括font-family属性和src属性，font-family定义字体的名称，src：url()中包括该字体的来源，如下：

而当我们要引用我们设置的字体文件时，即在标签中通过font-family后接该其字体名称即可，如下：