如何在 HTML 中更改字体?

由 hcduguo

在HTML中，我们可以使用以下两种方式更改字体：

  1. 使用HTML标签
  2. 使用样式属性

使用HTML标签

如果我们想要用HTML标签更改网页上文本的字体，按照以下步骤，我们可以轻松更改字体：

步骤1：首先，我们在文本编辑器中键入Html代码，或使用文本编辑器打开现有的Html文件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用HTML标签修改字体</title>
    </head>
    <body>
        <h3>《相见欢·林花谢了春红》</h2>
        <p>林花谢了春红，太匆匆，无奈朝来寒雨晚来风。</p>
        <p>胭脂泪，相留醉，几时重，自是人生长恨水长东。</p>
    </body>
</html>

效果展示：

《相见欢·林花谢了春红》

林花谢了春红，太匆匆，无奈朝来寒雨晚来风。

胭脂泪，相留醉，几时重，自是人生长恨水长东。

步骤2：将光标移动到我们要更改字体文本的开头，在此输入空的Html <font>标记，在文本的结尾处输入关闭字体标签。

< font > 单行文本和语句 </ font >  

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用HTML标签修改字体</title>
    </head>
    <body>
        <h3>《相见欢·林花谢了春红》</h2>
        <p><font>林花谢了春红，太匆匆，无奈朝来寒雨晚来风。</font></p>
        <p><font>胭脂泪，相留醉，几时重，自是人生长恨水长东。</font></p>
    </body>
</html>

步骤3：添加名称为“ face ”的字体标签属性。在开始的<font>标签内键入face属性。然后我们必须给出字体的名称。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用HTML标签修改字体</title>
    </head>
    <body>
        <h3>《相见欢·林花谢了春红》</h2>
        <p><font face="SimHei">林花谢了春红，太匆匆，无奈朝来寒雨晚来风。</font></p>
        <p><font face="KaiTi">胭脂泪，相留醉，几时重，自是人生长恨水长东。</font></p>
    </body>
</html>

步骤4：最后，我们必须保存HTML代码并运行代码。执行后，我们将在浏览器中看到以下输出：

用HTML标签修改字体

《相见欢·林花谢了春红》

林花谢了春红，太匆匆，无奈朝来寒雨晚来风。

胭脂泪，相留醉，几时重，自是人生长恨水长东。

亲自试试

使用样式属性

如果要使用要在网页上显示的样式属性更改文本的字体，则必须遵循以下步骤。使用这些步骤，我们可以轻松更改字体。

步骤1：首先，我们在文本编辑器中键入HTML代码，或者使用文本编辑器中打开现有的HTML文件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用HTML标签修改字体</title>
    </head>
    <body>
        <h3>《相见欢·林花谢了春红》</h2>
        <p>林花谢了春红，太匆匆，无奈朝来寒雨晚来风。</p>
        <p>胭脂泪，相留醉，几时重，自是人生长恨水长东。</p>
    </body>
</html>

步骤2：现在，将光标移动到我们要更改其字体的文本的开头。然后，在<p>（段落）标记内键入CSS样式属性。

< p style = “ font-family：SimHei” > 任何文本 </ p >   

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用HTML标签修改字体</title>
    </head>
    <body>
        <h3>《相见欢·林花谢了春红》</h2>
        <p style="font-family:SimHei">林花谢了春红，太匆匆，无奈朝来寒雨晚来风。</p>
        <p style="font-family:KaiTi">胭脂泪，相留醉，几时重，自是人生长恨水长东。</p>
    </body>
</html>

步骤3：保存以下HTML代码，该代码使用CSS样式属性更改字体。运行上述HTML代码，我们将在浏览器中看到以下输出：

用HTML标签修改字体

《相见欢·林花谢了春红》

林花谢了春红，太匆匆，无奈朝来寒雨晚来风。

胭脂泪，相留醉，几时重，自是人生长恨水长东。

亲自试试

相关