HTML 字体样式-html教程-PHP中文网

HTML 字体样式

让我们看看一些基本的 HTML 字体样式：

1.设置字体大小

2.相对字体大小

3.设置字体

4.指定替代字体

5.设置字体颜色

6. Element

Conclusion

首页

web前端

html教程

HTML 字体样式

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:14 PM

html html5 HTML Tutorial HTML Properties HTML tags

以下文章“HTML 字体样式”概述了 HTML 中最常用的字体样式。 HTML，俗称超文本标记语言，是创建 Web 应用程序和网站所必需的最基本、最关键的语言或脚本之一。这就像网络应用程序开发的支柱，因为所有标签和其他功能构成了它的底层组件。

所有的前端开发也是基于HTML脚本。这只能用于提供标记标签，为了增强这些标签的外观和感觉，我们有另一个非常流行的库，CSS，它代表级联样式表。这可以用来实现 HTML 所需的各种样式。字体和样式构成了网站的主要部分，在本文中，我们将为您提供大多数 HTML 字体样式的列表。

HTML 字体样式

除了提高内容可读性之外，字体在使网站更加用户友好、吸引更多流量方面发挥着重要作用。字体颜色和字体还取决于计算机和使用其的浏览器，并且 HTML 也取决于计算机和浏览器。标签还用于向网站上的文本添加样式、颜色、大小。

;标签用于设置您网站上或

内出现的所有文本。元素具有相同的尺寸、颜色和外观。字体标签由三个属性组成：字体颜色和大小，这又构成了网站内不同字体样式的关键组成部分。

;标签是最常用也是最重要的标签之一，可用于为您的网页构建良好的外观和感觉。打开的后面的文本是标签将保持相同的方式，除非并且直到被关闭。标签。

让我们看看一些基本的 HTML 字体样式：

有一些与 HTML 字体样式相关的基本功能和特性，它们是：

1.设置字体大小

内容字体大小可以通过使用 size 属性来设置。可接受的范围值从 1（最小数）到 7（最大数）。任何字体类型的默认大小都是 3。

示例，

<!DOCTYPE html>
<html>
<head>
<title>Setting Basic Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>
</html>

登录后复制

2.相对字体大小

相对字体大小用于确定和指定比实际存在的当前字体大小大多少个尺寸和小多少个尺寸。可以这样指定：

<font size = "+f"> or by writing <font size = "−f">

登录后复制

示例，

<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+2">Font size = "+2"</font><br />
<font size = "+3">Font size = "+3"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>
</html>

登录后复制

3.设置字体

字体大小和相对字体大小设置之后的另一类是字体设置。这构成了上面列出的属性的关键部分。这可以通过使用face属性来设置，但应该始终记住，如果指定使用此字体值的用户没有在其系统中安装此字体，他们将无法看到它。相反，只有适用于该特定用户计算机的默认字体才会可见。

示例，

<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br /&gt
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>

登录后复制

4.指定替代字体

仅当用户在其系统上安装了特定字体时，这才用于指定各种字体；否则，将显示默认安装的字体。通过列出字体名称，可以提及多个，特别是两个或两个以上的字体替代方案，字体名称特别用逗号分隔。
当网页加载时，浏览器将负责显示第一个生成的字体。如果系统中没有安装提供的字体，则默认字体Times New Roman将成功显示。

示例，

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

登录后复制

5.设置字体颜色

这是构成 HTML 字体和样式列表的关键部分和组件的另一个属性。在这种字体中，颜色是通过使用任何颜色属性来设置的；可以通过使用指定颜色的十六进制代码和颜色名称来获取所需的颜色。

示例，

<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>
</html>
<basefont>

登录后复制

6. Element

This element is specific to HTML language and is supposed to provide the webpage with a default font size, typeface, and color for all the parts and components of the documents which are not contained inside the tag.

The tag could be easily used to override the settings.

This tag also makes use of color, face and size attributes which will relatively support all the font settings by providing the size of a value of +1 for one size greater or -2 for two sizes smaller.

Example,

<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the &lt;basefont&gt; Element</h2>
</body>
</html>

登录后复制

Conclusion

HTML font and styles are among the most critical components and features that cannot be overlooked and can give a very good shape and design to your website. When we talk about the latest javascript libraries available in the market, they contain all these and several other font and styles. For the basic HTML, this still needs to be done manually. I hope you liked our article. Stay tuned to our blog for more articles like these.

以上是HTML 字体样式的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn