(HTML) 如何在一个页面中使用 2 种自定义字体？答案

【问题标题】：(HTML) How do i use 2 custom fonts in a page?(HTML) 如何在一个页面中使用 2 种自定义字体？
【发布时间】：2017-11-15 20:11:04
【问题描述】：

我是 HTML5 编码的新手，我希望创建一个非常基本的网站。我已经在互联网上搜索了几个小时，想知道如何通过字体文件（.tff）在网页上使用自定义字体，但我没有得到可靠的答案。我只能得出结论，我需要一个 style.css 文件，其中包含我想使用的字体信息。虽然我仍然无法弄清楚如何让字体显示在我的网页上，但我真正不知道的是如何在网页上使用 2 种不同的自定义字体。在我可以在互联网上找到的所有模糊答案中，它们只告诉我如何为网页使用一种字体，但是我想为不同的段落等使用 2 种不同的字体。我仍然不知道该怎么做，尽管我使用的是 HTML 格式（特别是 5），但我能找到的东西教我如何以 CSS 格式这样做。我想要一些关于如何在网页中为不同段落使用 2 种自定义字体以及如何在浏览器上打开 .html 文件时显示这些字体的帮助。我将不胜感激。

【问题讨论】：

这有点像问“如何将两个段落放在一个页面上？”你从第一个开始，然后添加第二个。不要想太多。
@ceejayoz 是的。但问题还在于在 HTML 页面中使用 CSS，而不仅仅是使用两种字体而不是一种。
HTML5 只是 HTML 的版本，它只是添加了新功能。您可能不需要提及 5. HTML 和 CSS 齐头并进，您几乎总是会同时使用这两者； HTML 用于内容（即文本、图像等），CSS 用于样式（颜色、字体、位置等），JavaScript 用于交互性（按钮、动画等）。从 HTML/CSS 教程开始，例如 this one。

标签： html fonts

【解决方案1】：

你必须使用 CSS 来做到这一点。该CSS可以嵌入到您的标签下的html中

<html>
  <head>
   <style>
      @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
      @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}
      @font-face { font-family: Delicious2; src: url('Delicious2-Roman.otf'); } 
      @font-face { font-family: Delicious2; font-weight: bold; src: url('Delicious-Bold.otf');}
   </style>
   </head>

然后你可以在你的html中引用这些字体

<font face="Delicious">This is some text!</font>

https://www.w3schools.com/tags/att_font_face.asp

【讨论】：

非常感谢，这正是我想要的。非常感谢。
太棒了。如果这回答了您的问题，请单击复选标记，以便其他人更容易找到此答案。

【解决方案2】：

我相信您想要的只是在您的网页上应用不同的字体样式。首先，在您的项目中托管您的字体并使用 CSS 类将字体系列更改为您喜欢的网页的任何部分。

<div style:'font-family: fantasy'>This is font style 1</div> 
<div style:'font-family: cursive'>This is font style 2</div>

【讨论】：

【解决方案3】：

您需要首先在网站上托管字体（将 TTF 文件放在 HTML 文件旁边的文件夹中），然后使用 CSS 将其应用于元素（例如：您的段落、标题等）。使用这种方法，您可以使用两种、三种或多种您喜欢的不同字体。 W3Schools 有时真的很有帮助，这是他们所在的场合。我可以稍后再详细说明。

【讨论】：