如何在 HTML 站点上安装自定义字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7961721/
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
How do I install a custom font on an HTML site
提问by adam
I am not using flash or php - and I have been asked to add a custom font to a simple HTML layout. "KG June Bug"
我没有使用 flash 或 php - 我被要求将自定义字体添加到简单的 HTML 布局中。“KG六月虫”
I have it downloaded locally - is there a simple CSS trick to accomplish this?
我已将其下载到本地 - 是否有一个简单的 CSS 技巧来完成此操作？
回答by Nicolas Modrzyk
Yes, you can use the CSS feature named @font-face. It has only been officially approved in CSS3, but been proposed and implemented in CSS2 and has been supported in IE for quite a long time.
是的，您可以使用名为 @font-face 的 CSS 功能。它只在 CSS3 中得到正式批准，但在 CSS2 中被提出并实现，并且在 IE 中得到了相当长的支持。
You declare it in the CSS like this:
您可以像这样在 CSS 中声明它：
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}
Then, you can just reference it like the other standard fonts:
然后，您可以像其他标准字体一样引用它：
h3 { font-family: Delicious, sans-serif; }
So, in this case,
所以，在这种情况下，
<html>
<head>
<style>
@font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); }
h1 {
font-family: JuneBug
}
</style>
</head>
<body>
<h1>Hey, June</h1>
</body>
</html>
And you just need to put the JUNEBUG.TFF in the same location as the html file.
并且您只需要将 JUNEBUG.TFF 放在与 html 文件相同的位置。
I downloaded the font from the dafont.comwebsite:
我从dafont.com网站下载了字体：
回答by nheinrich
You can use @font-face in most modern browsers.
您可以在大多数现代浏览器中使用 @font-face。
Here's some articles on how it works:
这里有一些关于它是如何工作的文章：
- http://webdesignerwall.com/general/font-face-solutions-suggestions
- http://webdesignerwall.com/tutorials/css3-font-face-design-guide
- http://webdesignerwall.com/general/font-face-solutions-suggestions
- http://webdesignerwall.com/tutorials/css3-font-face-design-guide
Here is a good syntax for adding the font to your app:
这是将字体添加到应用程序的好语法：
Here are a couple of places to convert fonts for use with @font-face:
这里有几个地方可以转换字体以与 @font-face 一起使用：
- http://www.fontsquirrel.com/fontface/generator
- http://fontface.codeandmore.com/
- http://www.font2web.com/
- http://www.fontsquirrel.com/fontface/generator
- http://fontface.codeandmore.com/
- http://www.font2web.com/
Also cufon will work if you don't want to use font-face, and it has good documentation on the web site:
如果您不想使用 font-face，cufon 也可以使用，并且它在网站上有很好的文档：
回答by John Slegers
For the best possible browser support, your CSS code should look like this :
为了获得最佳的浏览器支持，您的 CSS 代码应如下所示：
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
For more info, see the article Using @font-faceat CSS-tricks.com.
欲了解更多信息，请参阅文章使用@字体面在CSS-tricks.com。
回答by SIAMWEBSITE
Try this
尝试这个
@font-face {
src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket {
font-family: Market Deco;
} <div class="FontMarket">KhonKaen Market</div>vilis.org
vilis.org
回答by Richard Stitz
If you are using an external style sheet, the code could look something like this:
如果您使用的是外部样式表，则代码可能如下所示：
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
And should be saved in a separate .css file (eg styles.css). If your .css file is in a location separate from the page code, the actual font file should have the same path as the .css file, NOT the .html or .php web page file. Then the web page needs something like:
并且应该保存在一个单独的.css 文件中（例如styles.css）。如果您的 .css 文件位于与页面代码不同的位置，则实际字体文件应与 .css 文件具有相同的路径，而不是 .html 或 .php 网页文件。然后网页需要类似的东西：
<link rel="stylesheet" href="css/styles.css">
in the <head> section of your html page. In this example, the font file should be located in the css folder along with the stylesheet. After this, simply add the class="junebug" inside any tag in your html to use Junebug font in that element.
在 html 页面的 <head> 部分。在此示例中，字体文件应与样式表一起位于 css 文件夹中。在此之后，只需在 html 的任何标记中添加 class="junebug" 即可在该元素中使用 Junebug 字体。
If you're putting the css in the actual web page, add the style tag in the head of the html like:
如果您将 css 放在实际网页中，请在 html 的头部添加样式标记，如：
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
And the actual element style can either be included in the above <style>and called per element by class or id, or you can just declare the style inline with the element. By element I mean <div>, <p>, <h1> or any other element within the html that needs to use the Junebug font. With both of these options, the font file (Junebug.ttf) should be located in the same path as the html page. Of these two options, the best practice would look like:
实际的元素样式可以包含在上面，<style>并按类或 id 为每个元素调用，或者您可以只声明与元素内联的样式。我所说的元素是指 <div>、<p>、<h1> 或 html 中需要使用 Junebug 字体的任何其他元素。使用这两个选项，字体文件 (Junebug.ttf) 应位于与 html 页面相同的路径中。在这两个选项中，最佳实践如下所示：
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
</style>
and
和
<h1 class="junebug">This is Junebug</h1>
And the least acceptable way would be:
最不可接受的方式是：
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
and
和
<h1 style="font-family: Junebug;">This is Junebug</h1>
The reason it's not good to use inline styles is best practice dictates that styles should be kept all in one place so editing is practical. This is also the main reason that I recommend using the very first option of using external style sheets. I hope this helps.
使用内联样式不好的原因是最佳实践要求样式应该保存在一个地方，这样编辑才实用。这也是我推荐使用外部样式表的第一个选项的主要原因。我希望这有帮助。
回答by Abbass Sharara
there is a simple way to do this: in the html file add:
有一种简单的方法可以做到这一点：在 html 文件中添加：
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />
Note: you put the name of .ttf file you have. then go to to your css file and add:
注意：您输入了 .ttf 文件的名称。然后转到您的 css 文件并添加：
h1 {
color: blue;
font-family: vermin vibes;
}
Note: you put the font family name of the font you have.
注意：您输入您拥有的字体的字体系列名称。
Note: do not write the font-family name as your font.ttf name example: if your font.ttf name is: "vermin_vibes.ttf" your font-family will be: "vermin vibes" font family doesn't contain special chars as "-,_"...etc it only can contain spaces.
注意：不要将字体系列名称写为您的 font.ttf 名称示例：如果您的 font.ttf 名称是：“vermin_vibes.ttf”，您的字体系列将是：“vermin vibes”字体系列不包含特殊字符如“-,_”...等它只能包含空格。
