Html 在 HTML5 中内联自定义 CSS 字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32462939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inline Custom CSS Fonts In HTML5
提问by Ben Ackerley
I am trying to use a custom font in a webpage. I however know next to nothing about HTML5 and CSS. I want 1h1 tag to have a custom font. I have the .ttf file in the same folder as the webpage. I tried this with no success:
我正在尝试在网页中使用自定义字体。然而，我对 HTML5 和 CSS 几乎一无所知。我希望1h1 标签具有自定义字体。我的 .ttf 文件与网页位于同一文件夹中。我试过这个没有成功：
<h1 style="text-align: center"; font-family="MinecrafterReg.ttf">Welcome to Ben's Minecraft</h1>
Could anyone else help me?
其他人可以帮助我吗？
回答by Ben Ackerley
Stick this in the style tags:
将其粘贴在样式标签中：
@font-face {
font-family: MinecrafterReg;
src: url(MinecrafterReg.ttf);
font-weight:400;
Then stick this in the h1 tag:
然后将其粘贴在 h1 标签中：
<h1 style="text-align: center; font-family: MinecrafterReg">Welcome to Ben's Minecraft</h1>
回答by James Gentes
Nowadays you can place an @importat the top of your styleblock:
现在你可以@import在style块的顶部放置一个：
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
回答by Mike
This is not how you should use a custom font in a website. First you should use a external style sheet and have all your css in that. Using inline styles is not a great practice. Second, I do not think you can link to a .ttf file like you want. Notice also that your code had wrong inline format. font-family: not =. Also the whole inline style needs to be in quotes. style="text-align: center; font-family: 'Sigmar One', cursive;"
这不是您应该在网站中使用自定义字体的方式。首先，您应该使用外部样式表并在其中包含所有 css。使用内联样式并不是一个很好的做法。其次，我认为您无法按照自己的意愿链接到 .ttf 文件。还要注意你的代码有错误的内联格式。字体系列：不是=。整个内联样式也需要用引号引起来。style="text-align: center; font-family: 'Sigmar One', 草书;"
That being said - you could link your font in your 'head' of your document and then use inline styles to style h1. Here is a way to do it with a google font. Hope this helps!
话虽如此 - 您可以在文档的“头部”中链接字体，然后使用内联样式设置 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>
