HTML5 中的内联自定义 CSS 字体答案

【问题标题】：Inline Custom CSS Fonts In HTML5HTML5 中的内联自定义 CSS 字体
【发布时间】：2015-12-04 10:36:37
【问题描述】：

我正在尝试在网页中使用自定义字体。然而，我对 HTML5 和 CSS 几乎一无所知。我希望 1 h1 标签具有自定义字体。我的 .ttf 文件与网页位于同一文件夹中。我试过这个没有成功：

<h1 style="text-align: center"; font-family="MinecrafterReg.ttf">Welcome to Ben's Minecraft</h1>

其他人可以帮助我吗？

【问题讨论】：

相关stackoverflow.com/questions/7512468/…

标签： css html fonts

【解决方案1】：

font-family:url('https://s3-xxxxxxxxxxxxxx/fonts/FloydsnirLTStd-Rmands.otf');在内联样式 css 中

【讨论】：

这将如何工作以及为什么它应该有助于解决所描述的问题？

【解决方案2】：

这不是您应该在网站上使用自定义字体的方式。首先，您应该使用外部样式表并将所有 CSS 包含在其中。使用内联样式不是一个好习惯。其次，我认为您不能随意链接到 .ttf 文件。另请注意，您的代码有错误的内联格式。字体系列：不是=。此外，整个内联样式需要用引号引起来。 style="text-align: center; font-family: 'Sigmar One', cursive;"

话虽如此 - 您可以将您的字体链接到文档的“头部”，然后使用内联样式设置 h1 样式。这是一种使用谷歌字体的方法。希望这会有所帮助！

<head>
<link href='https://fonts.googleapis.com/css?family=Sigmar+One' rel='stylesheet' type='text/css'>
</head>

<h1 style="text-align: center; font-family: 'Sigmar One', cursive;">Welcome to Ben's Minecraft</h1>

【讨论】：

在优化性能时，内联样式实际上非常有用。
请删除你的答案

【解决方案3】：

现在您可以在 style 块的顶部放置一个 @import：

<style>
  @import url('https://fonts.googleapis.com/css?family=Roboto');
</style>

【讨论】：

【解决方案4】：

把这个贴在样式标签里：

@font-face {
font-family: MinecrafterReg;
src: url(MinecrafterReg.ttf);
font-weight:400;

然后把这个贴在h1标签里：

<h1 style="text-align: center; font-family: MinecrafterReg">Welcome to Ben's Minecraft</h1>

【讨论】：