可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I have a font namely SourceSansPro, and I include it in my css as follows:
@font-face { font-family: "SourceSansPro"; src: url("../font/SourceSansPro-Bold.otf"); font-weight: bold; font-style: normal; } @font-face { font-family: "SourceSansPro"; src: url("../font/SourceSansPro-Regular.otf"); font-weight: normal; font-style: normal; } @font-face { font-family: "SourceSansPro"; src: url("../font/SourceSansPro-Light.otf.otf"); font-weight: lighter; font-style: normal; }
It's rather redundant. Isn't there a neater way to do this?
回答1:
Unfortunately the @font-face syntax is not very flexible. You're at the mercy of the browser developers in this case. You can, however, segment your fonts into a fonts.css file and just do an import:
@import url('css/fonts.css');
Another possible solution would be to add the font via Google's Font API. That way, you don't have to worry about the CSS in the first place. You just add
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
to your stylesheet. Or you can add
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
to the <head> of your document.
回答2:
It is not essentially redundant, since you are using three typefaces and they need to be declared separately. You can, however, omit the declarations font-style: normal and font-weight: normal, since they correspond to defaults.
On the other hand, the code works only on browsers that support OTF as the format of downloadable fonts. Use e.g. http://www.fontsquirrel.com/tools/webfont-generator to generate other formats and code for taking them into use.
The font-weight: lighter probably works in most situations, but it is illogical (using relative keyword when you should specify the actual weight) and should be replaced by font-weight: 200, which corresponds to the actual weight of the typeface
回答3:
Well, you're obviously going to need to change the font-family name for each one or I would think that having them all the same would make them clash. At least I would think that. I have never had it happen to me, but if it's not working, then do that. But if not, ignore this.
As for the @font-face simplicity, the only real specifications you need for the @font-face is the font-family and the src. That calls the font style, obviously. So any other web styling you can leave to either the html style or css.
@font-face { font-family: "SourceSansPro"; src: url("../font/SourceSansPro-Light.otf.otf"); }
You can then style your font in either a span or css class.
<span style="font-family: SourceSansPro; font-weight: bold; font-style: italic;">Styled Font</span> <div style="font-family: SourceSansPro; font-weight: bold; font-style: italic;">Styled Font</div> <div class="myspecificstyle">Styled Font</div>
If you have a lot of fonts, I would just put them all in one css file and then link it to the page you're using them on.
<link rel="stylesheet" type="text/css" href="myfonts.css">
