如何更改网页上的字体类型、大小和颜色

  • Z时代
  • 2024-03-11
  • 分类：电子

如何更改网页上的字体类型、大小和颜色此页面包含有关如何更改 HTML（超文本标记语言）网页上的字体及其颜色的说明。随着HTML5的引入，现在配置网页字体的正确方法是使用CSS（层叠样式表）。使用内联样式属性或字体标签的旧方法已被弃用，不应再使用。

笔记尽管已弃用的方法仍然可以在现代 Internet 浏览器中正确呈现，但不再保证它们能够这样做。要创建能够正确显示最多用户数量的网页，请使用本页描述的 CSS 方法。

提示更改此页面上的字体属性的方法适用于大多数 HTML 标记中包含的文本，包括<>、<p>和<span>。这些方法也适用于使用<table>、<tr>和<td>标记的表中的文本。

  • 将 CSS 用于单个应用程序。

  • 对一页或多页使用 CSS。

  • 使用字体标签。

将 CSS 用于单个应用程序

如果您计划更改网页上的一个单词、句子或段落的字体及其颜色，请在元素标记中配置其属性。使用style属性，您可以使用font-family、color指定字体和颜色，并使用font-size指定字体大小，如下例所示。

示例代码

<p字体大小：20px；">font-size : 20px;">该文本的字体为 Courier，蓝色，20px。</p>

结果

该文本采用 Courier 字体，为蓝色，大小为 20 像素。

对一页或多页使用 CSS

一页的自定义字体

在网页的头部，您可以在 <style></style> 选项卡之间插入代码，以更改各种元素中文本的外观。下一个蓝色框包含示例代码，一旦调用，会将您的字体更改为 Courier 并将其设置为红色。正如您所看到的，我们已将类名称定义为“custom”。

<样式类型=“文本/css”>
。风俗 {
 字体系列：Courier；
 红色;
 字体大小：20px；
}
</风格>

定义后，通过将“custom”类附加到页面中的大多数元素，可以将此样式应用于它们。下面的框显示了两行代码及其各自的结果。

例子

<p>这整句话都是红色和Courier的</p>
<p>只有单词<span>test</span>是红色和Courier。</p>

结果

这整句话都是红色的和快递的。

只有“test”两个字是红色的和“Courier”。

许多页面的自定义字体

导入外部 CSS 文件非常有用，因为它允许用户同时更改多个页面的规则。以下部分显示了创建基本 CSS 文件的示例，该文件可更改大多数元素的字体及其颜色。该文件可能被加载到多个网页，甚至整个站点。

使用任何基本文本编辑器，将以下文本保存为 .css 文件将为导入做好准备。

@charset“utf-8”；
。导游 {
 字体系列：Courier；
 颜色：#005CB9；
}

将前面的文本放入 .css 文件（我们将其命名为basic.css）后，您可以使用类似于以下示例的行从任何其他页面链接到它。

<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">

提示用户可以通过更改导入的 .css 文件中的代码来更改页面上元素的属性。

使用字体标签

尽管已弃用，但HTML <font> 标记仍然可以使用，并且可能需要与某些在线服务一起使用。使用 font 标签时，必须包含face属性，它描述了要使用的字体。在下面的示例中，我们使用 Courier 字体和十六进制颜色代码 #005CB9，它是深蓝色。

示例代码

<font color="#005CB9" face="courier" size="5">特殊字体示例。</font>

结果

特殊字体示例。

以上是 如何更改网页上的字体类型、大小和颜色 的全部内容， 来源链接： utcz.com/dzbk/943037.html

回到顶部