最近我在寻找如何在网站上使用Web字体时,发现了CSS规则中的@font-family
。
言归正传,下面是@font-family CSS代码中的两个变体:
@font-face {
font-family: 'Droid Serif'; /* NOTE THIS LINE */
font-weight: normal; /* NOTE THIS LINE */
font-style: normal; /* NOTE THIS LINE */
src: url('DroidSerif-Regular-webfont.eot');
src: url('DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
local('Droid Serif'), local('DroidSerifRegular'),
url('DroidSerif-Regular-webfont.woff') format('woff'),
url('DroidSerif-Regular-webfont.ttf') format('truetype'),
url('DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
}
@font-face {
font-family: 'Droid Serif'; /* NOTE THIS LINE */
font-weight: normal; /* NOTE THIS LINE */
font-style: italic; /* NOTE THIS LINE */
src: url('DroidSerif-Italic-webfont.eot');
src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
local('Droid Serif'), local('DroidSerifItalic'),
url('DroidSerif-Italic-webfont.woff') format('woff'),
url('DroidSerif-Italic-webfont.ttf') format('truetype'),
url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
}
and this is another:
@font-face {
font-family: 'DroidSerifRegular'; /* NOTE THIS LINE */
font-weight: normal; /* NOTE THIS LINE */
font-style: normal; /* NOTE THIS LINE */
src: url('DroidSerif-Italic-webfont.eot');
src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
local('Droid Serif'), local('DroidSerifItalic'),
url('DroidSerif-Italic-webfont.woff') format('woff'),
url('DroidSerif-Italic-webfont.ttf') format('truetype'),
url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
}
@font-face {
font-family: 'DroidSerifItalic'; /* NOTE THIS LINE */
font-weight: normal; /* NOTE THIS LINE */
font-style: normal; /* NOTE THIS LINE */
src: url('DroidSerif-Italic-webfont.eot');
src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
local('Droid Serif'), local('DroidSerifItalic'),
url('DroidSerif-Italic-webfont.woff') format('woff'),
url('DroidSerif-Italic-webfont.ttf') format('truetype'),
url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
}
比较我已经注释的行和
/* NOTE THIS LINE */
第一个变体是由Google Web Fonts提供的,而第二个变体是由Font Squirrel提供的。那么,这两个中有一个是错误的吗?(只是想确认一下,尽管两者都非常可靠。)如果可以接受,那么这两个中哪一个更好?
font-family
属性中绝对不要指定字体样式。但是,也有可能是我的知识已经过时了。 - Mr Lister