实际上我在fonts文件夹中有三个文件。这些是Gotham-Bold.ttf
,Gotham-Medium.ttf
,Gotham-Thin.ttf
.....所以我需要对这三种类型使用@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: 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");
}
感谢。
答案 0 :(得分:8)
这是正确的,对于您要使用的每种字体,您需要@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;
}
然后你可以这样使用你的字体:
body {
font-family: 'Gotham';
}
// For normal
.normal {
font-weight: 400;
}
// For bold
.bold,
strong {
font-weight: 700;
}
// For thin
.light {
font-weight: 300;
}
答案 1 :(得分:0)
是的,您需要将每种字体类型声明为单独的@fontface
。在这种情况下,每个都是不同的字体系列。
像这样:
@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 */
}
只包含您正在使用的字体,但如果您不在页面的任何位置使用Gotham Thin,请不要包含它(为了提高速度)。