发表新帖
发表新帖

how to simplify font import in css

后端 未结
关注
3 713
无人共我
无人共我 2021-01-26 00:47

I have a font namely SourceSansPro, and I include it in my css as follows:

@font-face {
    font-family: \"SourceSansPro\";
    src: url(\"../font/SourceSansPro-
相关标签:
3条回答
  • 走了就别回头了
    2021-01-26 00:55

    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.

    0 讨论(0)
  • 悲哀的现实
    2021-01-26 01:10

    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

    0 讨论(0)
  • 时光取名叫无心
    2021-01-26 01:20

    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">
    0 讨论(0)
 看不清?
提交回复
热议问题