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

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

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

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

  • 将 CSS 用于单个应用程序。
  • 对一页或多页使用 CSS。
  • 使用字体标签。

将 CSS 用于单个应用程序

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

示例代码

<p style="font-family:Courier; color:Blue; font-size : 20px;">该文本的字体为 Courier,蓝色,20px。</p>

结果

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

对一页或多页使用 CSS

一页的自定义字体

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

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

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

例子

<p class="custom">这整句话都是红色和Courier的</p>
<p>只有单词<span class="custom">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>

结果

特殊字体示例。

本站所有文章资讯、展示的图片素材等内容均为注册用户上传(部分报媒/平媒内容转载自网络合作媒体),仅供学习参考。 用户通过本站上传、发布的任何内容的知识产权归属用户或原始著作权人所有。如有侵犯您的版权,请联系我们反馈本站将在三个工作日内改正。
(0)
上一篇 2023年10月5日
下一篇 2023年10月5日

相关推荐

  • 如何修复Win10中的Microsoft Store登录错误0x801901f4

    您最近是否在尝试登录Microsoft Store时遇到 0x801901f4 错误?好吧,这个问题可能是由于损坏的系统文件、损坏的 Windows 图像或不必要的存储缓存引起的。…

    2023年4月14日
  • NVMe、M.2和SATA SSD主要区别,了解固态硬盘之间优点

    固态硬盘普遍比老式机械硬盘更快,但并非所有SSD都相同。它们有不同的形状和大小,具有不同的最大速度,而且正如您可能猜到的那样,价格也不同。 我们在“您应该购买哪种类型的SSD?”并…

    2023年2月18日
  • 如何使用超级终端登录路由器

    大多数路由器都有一个串行端口,用于连接到计算机的串行端口。使用 Windows 超级终端,您可以连接到路由器并输入在网络上设置路由器所需的命令。当您连接到路由器时,显示的第一个提示…

    2023年8月18日
  • 隐私浏览模式,如何在任何浏览器中启用

    当您上网时,Chrome、Firefox 和 Safari 等 Web 浏览器会保存cookies(包含有关您的活动信息的小文件),使网站能够识别您、记住您的偏好并相应地提出建议(…

    2023年4月20日
  • 如何修复WINDOWS8中的“未检测到USB”和连接问题?

    与 USB 设备相关的连接问题是许多用户面临的常见问题。将 USB 设备(包括音频、存储、打印或常见输出设备)连接到 Windows 8 系统时,您可能会发现各种错误。下面列出了一…

    2023年8月16日
  • 8Bitdo复古机械键盘评测

    当您想到游戏键盘时,您可能首先想到的是带有 RGB 灯光的风格化黑色键盘,让人尖叫“游戏玩家”。8Bitdo 复古机械键盘无疑是一款游戏键盘,但它显然是为不同类型的游戏玩家打造的。…

    2024年1月13日
  • 如何如何在Windows11上禁用远程桌面

    远程桌面是一项有价值的 Windows 功能,但它也可能是一种威胁。如果您不使用它,请使用本指南在 Windows 11 上禁用远程桌面。 当您在 Windows 上启用远程桌面 …

    2023年2月3日
  • 在Windows11上裁剪视频的6种常用方法

    精心编辑的视频可以使您的观看次数成倍增加。了解如何至少裁剪视频以符合平台的视频尺寸要求是您可以为观众做的最基本的事情之一。即使您只想向您的朋友和家人展示视频,通过简单的裁剪去除帧中…

    2024年3月15日
  • 从Windows10中删除Microsoft帐户的7种最佳方法

    众所周知,Microsoft希望我们在PC上使用Microsoft帐户以获得无缝的Windows10体验。因此,虽然在您的PC上添加Microsoft帐户一如既往地容易,但删除它仍…

    2022年11月20日
  • 如何在Win10中保护文件/文件夹免受勒索软件攻击

    您知道如何保护自己免受勒索软件的侵害吗? 这种在线攻击的威胁日益严重,但有一些方法可以保证安全。 本文介绍了保护您的宝贵文件和数据免受恶意软件(勒索软件)攻击和威胁的几种有效方法。…

    2023年7月28日