CSS 我有三种字体类型-Gotham-bold、Gotham-medium、Gotham-thin，所以我需要使用三次@font-face吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17836956/
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
I have three font type -Gotham-bold, Gotham-medium, Gotham-thin, so do I need to use three times @font-face?
提问by Exploring
Actually I have three files in the fonts folder. These are Gotham-Bold.ttf, Gotham-Medium.ttf, Gotham-Thin.ttf..... So do I need to use the @font-facethree times for those three types. Please anybody help me.
实际上我在字体文件夹中有三个文件。这些是Gotham-Bold.ttf, Gotham-Medium.ttf, Gotham-Thin.ttf..... 所以我需要@font-face对这三种类型使用3 次。请任何人帮助我。
I have currently used the code like the following:
我目前使用的代码如下：
@font-face {
font-family: 'Gotham';
src: url('fonts/Gotham-Bold.eot'); /* IE9 Compat Modes */
src: url('fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Gotham-Bold.woff') format('woff'), /* Modern Browsers */
url('fonts/Gotham-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/Gotham-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Gotham';
src: url("/fonts/Gotham-Bold.eot");
}
@font-face {
font-family: 'Gotham';
src: url("/fonts/Gotham-Bold.woff") format("woff");
}
Thanks.
谢谢。
回答by Brett DeWoody
That is correct, you'll need an @font-facefor each weight of the font you want to use.
没错，您需要@font-face为要使用的字体的每个粗细指定一个。
@font-face {
font-family: 'Gotham';
src: url('fonts/Gotham-Bold.eot'); /* IE9 Compat Modes */
src: url('fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Gotham-Bold.woff') format('woff'), /* Modern Browsers */
url('fonts/Gotham-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/Gotham-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Gotham';
src: url('fonts/Gotham-Medium.eot'); /* IE9 Compat Modes */
src: url('fonts/Gotham-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Gotham-Medium.woff') format('woff'), /* Modern Browsers */
url('fonts/Gotham-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/Gotham-Medium.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gotham';
src: url('fonts/Gotham-Thin.eot'); /* IE9 Compat Modes */
src: url('fonts/Gotham-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Gotham-Thin.woff') format('woff'), /* Modern Browsers */
url('fonts/Gotham-Thin.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/Gotham-Thin.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: 300;
font-style: normal;
}
Then you can use your fonts as so:
然后你可以使用你的字体：
body {
font-family: 'Gotham';
}
// For normal
.normal {
font-weight: 400;
}
// For bold
.bold,
strong {
font-weight: 700;
}
// For thin
.light {
font-weight: 300;
}
回答by robooneus
Yes, you need to declare each font-type as a separate @fontface. Each would be a different font-family in that case.
是的，您需要将每个字体类型声明为单独的@fontface. 在这种情况下，每个都是不同的字体系列。
Like so:
像这样：
@font-face {
font-family: 'GothamThin';
/* links to all gotham thin files, font-weight/style declaration */
}
@font-face {
font-family: 'GothamMedium';
/* links to all gotham medium files, font-weight/style declaration */
}
@font-face {
font-family: 'GothamBold';
/* links to all gotham bold files, font-weight/style declaration */
}
Only include the fonts you are using, though.. if you don't use Gotham Thin anywhere on the page, don't include it (for speed).
但是，只包含您正在使用的字体……如果您不在页面的任何地方使用 Gotham Thin，请不要包含它（为了速度）。
