如何在 CSS 中嵌入字体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11737168/
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 to embed fonts in CSS?
提问by Mohammad
I want to use some fonts and I want it to work without having this font on the client computer. I have done this but doesn't work:
我想使用一些字体并且我希望它在客户端计算机上没有这种字体的情况下工作。我已经这样做了，但不起作用：
@font-face {
font-family: EntezareZohoor2;
src: url(Entezar2.ttf) format("truetype");
}
.EntezarFont{
font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}
回答by Suresh kumar
Following lines are used to define a font in css
以下几行用于在 css 中定义字体
@font-face {
font-family: 'EntezareZohoor2';
src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Following lines to define/use the font in css
以下几行定义/使用 css 中的字体
#newfont{
font-family:'EntezareZohoor2';
}
回答by Yannick Blondeau
One of the best source of information on this topic is Paul Irish's Bulletproof @font-face syntaxarticle.
关于此主题的最佳信息来源之一是 Paul Irish 的Bulletproof @font-face 语法文章。
Read it and you will end with something like:
阅读它，你会以类似的东西结束：
/* definition */
@font-face {
font-family: EntezareZohoor2;
src: url('fonts/EntezareZohoor2.eot');
src: url('fonts/EntezareZohoor2.eot?') format('?'),
url('fonts/EntezareZohoor2.woff') format('woff'),
url('fonts/EntezareZohoor2.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* use */
body {
font-family: EntezareZohoor2, Tahoma, serif;
}
回答by RAN
Go through http://www.w3.org/TR/css3-fonts/
Try this:
通过http://www.w3.org/TR/css3-fonts/
试试这个：
@font-face {
font-family: 'EntezareZohoor2';
src: url('EntezareZohoor2.eot');
src: local('EntezareZohoor2'), local('EntezareZohoor2'), url('EntezareZohoor2.ttf') format('svg');
font-weight: normal;
font-style: normal;
}
回答by Prashobh
回答by kiko carisse
When I went to Google fonts all they gave me were true type font files .ttfand didn't explain at all how to use the @font-face to include them into my document. I tried the web font generator from font squirrel too, which just kept running the loading gif and not working... I then found this site -
当我去谷歌字体时，他们给我的都是真正的字体文件.ttf，根本没有解释如何使用@font-face 将它们包含到我的文档中。我也尝试了 font squirrel 的网络字体生成器，它一直在运行加载 gif 并且不工作......然后我找到了这个网站 -
I had great success using the following method:
我使用以下方法取得了巨大成功：
I selected the Add Fontsbutton, leaving the default options, added all of my .ttfthat Google gave me for Open Sans(which was like 10, I chose a lot of options...).
我选择了“添加字体”按钮，保留默认选项，添加.ttf了 Google 给我的所有内容Open Sans（就像 10 个，我选择了很多选项......）。
Then I selected the Convertbutton.
然后我选择了转换按钮。
Heres the best part!
这是最好的部分！
They gave me a zip file with all the font format files I selected, .ttf, .woffand .eot. Inside that zip file they had a demo.htmlfile that I just double clicked on and it opened up a web page in my browser showing me example usages of all the different css font options, how to implement them, and what they looked like etc.
他们给了我一个 zip 文件，其中包含我选择的所有字体格式文件.ttf，.woff以及.eot. 在那个 zip 文件中，他们有一个demo.html我刚刚双击的文件，它在我的浏览器中打开了一个网页，向我展示了所有不同 css 字体选项的示例用法、如何实现它们以及它们的外观等。
@font-face
@font-face
I still didn't know at this point how to include the fonts into my stylesheet properly using @font-facebut then I noticed that this demo.htmlcame with it's own stylesheet in the zip as well. I opened the stylesheet and it showed how to bring in all of the fonts using @font-faceso I was able to quickly, and easily, copy paste thisinto my project -
此时我仍然不知道如何正确使用将字体包含到我的样式表中，@font-face但后来我注意到这demo.html在 zip 中也带有它自己的样式表。我打开样式表，并展示了如何在所有使用的字体带来@font-face让我能够快速，轻松地，复制粘贴此到我的项目-
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-BoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-LightItalic.eot');
src: url('fonts/Open_Sans/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-LightItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-SemiBold.eot');
src: url('fonts/Open_Sans/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-SemiBold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Regular.eot');
src: url('fonts/Open_Sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Regular.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Light.eot');
src: url('fonts/Open_Sans/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Light.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Italic.eot');
src: url('fonts/Open_Sans/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Italic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-SemiBoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot');
src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-ExtraBold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Bold.eot');
src: url('fonts/Open_Sans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Bold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
The demo.htmlalso had it's own inline stylesheet that was interesting to take a look at, though I am familiar with working with font weights and styles once they are included so I didn't need it much. For an example of how to implement a font style onto an html element for reference purposes you could use the following method in a similar case to mine after @font-facehas been used properly -
该demo.html也有它自己的内联样式表，有趣的是，看一看，虽然我熟悉使用的字体粗细和样式的工作一旦被列入，所以我并不需要它了。有关如何在 html 元素上实现字体样式以供参考的示例，您可以在@font-face正确使用后在类似情况下使用以下方法-
html, body{
margin: 0;
font-family: 'Open Sans';
}
.banner h1{
font-size: 43px;
font-weight: 700;
}
.banner p{
font-size: 24px;
font-weight: 300;
font-style: italic;
}
回答by Can OTUR
I used Ataturk's font like this. I didn't use "TTF" version. I translated orginal font version ("otf" version) to "eot" and "woof" version. Then It works in local but not working when I uploaded the files to server. So I added "TTF" version too like this. Now, It's working on Chrome and Firefox but Internet Explorer still defence. When you installed on your computer "Ataturk" font, then working IE too. But I wanted to use this font without installing.
我像这样使用了 Ataturk 的字体。我没有使用“TTF”版本。我将原始字体版本（“otf”版本）翻译成“eot”和“woof”版本。然后它在本地工作但当我将文件上传到服务器时不起作用。所以我也像这样添加了“TTF”版本。现在，它在 Chrome 和 Firefox 上工作，但 Internet Explorer 仍在防御。当您在计算机上安装“Ataturk”字体时，也可以使用 IE。但我想在不安装的情况下使用这种字体。
@font-face {
font-family: 'Ataturk';
font-style: normal;
font-weight: normal;
src: url('font/ataturk.eot');
src: local('Ataturk Regular'), url('font/ataturk.ttf') format('truetype'),
url('font/ataturk.woff') format('woff');
}
You can see it on my website here: http://www.canotur.com
你可以在我的网站上看到它：http: //www.canotur.com
