html各种字体怎么用的

在HTML中，字体的使用可以通过不同的方式实现，为了确保网页的视觉效果和用户体验，理解如何正确地使用各种字体是非常重要的，以下是关于如何在HTML中使用各种字体的详细介绍。

使用Web安全字体

Web安全字体是一组字体，已预装在大多数操作系统中，因此可以保证用户在浏览网页时能够正确显示这些字体，一些常见的Web安全字体包括Arial, Times New Roman, Verdana, Georgia等，在HTML中，你可以直接通过font-family属性指定这些字体。

<p style="font-family: Arial, sans-serif;">这是一个使用Arial字体的段落。</p>

使用系统字体

除了Web安全字体之外，还可以利用用户机器上已安装的字体，这需要使用特定的字体名称，但无法保证所有用户都有相同的字体。

<p style="font-family: 'Times New Roman', serif;">这个段落尝试使用用户计算机上的“Times New Roman”字体。</p>

使用在线字体库

有许多在线服务允许你使用它们的字体库，如Google Fonts或Adobe Fonts，这些字体可以免费使用，并且易于通过链接标签添加到你的HTML文档中。

1、选择所需的字体，获取相应的链接，并在HTML文档的<head>部分添加该链接。

<link href="https://fonts.lug.ustc.edu.cn/css2?family=Roboto&display=swap" rel="stylesheet">

2、之后，你就可以在CSS中使用font-family属性引用这些字体了。

<p style="font-family: 'Roboto', sans-serif;">这个段落使用从Google Fonts加载的Roboto字体。</p>

使用@font-face规则

如果你想使用的字体不在任何字体库中，你可以使用@font-face规则来导入自己的字体文件，这通常涉及将字体文件（如.ttf或.woff格式）上传到网站服务器，并在CSS中声明它们。

1、在CSS文件中添加@font-face规则，并指定字体文件的路径。

@font-face {
    font-family: 'CustomFont';
    src: url('path/to/customfont.woff2') format('woff2'),
         url('path/to/customfont.woff') format('woff');
}

2、就像使用其他任何字体一样，通过font-family属性使用自定义字体。

<p style="font-family: CustomFont;">这个段落使用自定义字体。</p>

考虑字体的兼容性和性能

在使用字体时，要考虑不同浏览器的兼容性问题，以及字体文件对网站加载速度的影响，尽量优化字体文件的大小，选择合适的格式，并限制同时加载的字体数量，以确保良好的用户体验。

调整字体大小和样式

在设置字体后，你还可以使用CSS来调整字体的大小、粗细、斜体等样式。

<p style="font-family: Arial, sans-serif; font-size: 16px; font-weight: bold;">加粗的Arial字体段落。</p>