实际上,我在fonts文件夹中有三个文件。这些是Gotham-Bold.ttf
,Gotham-Medium.ttf
,Gotham-Thin.ttf
.....因此,对于这三种类型,我需要使用@font-face
3次。请任何人帮助我。
我目前使用的代码如下:
@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");
}
谢谢。
最佳答案
没错,对于每个要使用的字体重量,您都需要一个@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;
}
关于css - 我有三种字体类型-Gotham-bold,Gotham-medium,Gotham-thin,所以我需要使用三遍@ font-face吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17836956/