一个更好的@font-face套件Open Sans——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
一个更好的@font-face套件Open Sans

发布作者:萧强   发布时间:2015-11-2   阅读次数:3444

@字体包我为Open Sans都吸过。所以我建了一个更好的。

免责声明:这篇文章是针对那些有特殊理由想要举办字体的人。对于大多数的网页设计师,谷歌网页字体使用相同的技术,让您利用浏览器缓存和谷歌的CDN加速加载字体。除非你有一个可下载的webfont试剂盒的具体需要,我建议给Web字体的尝试。
Open Sans是真的伟大的无衬线字体,委托谷歌和可用的Apache许可证下。最近,我发现自己在网络上使用它,包括这个网站。虽然有许多工具可以使用Open Sans与行业标准@font-face CSS webfont嵌入,最webfont厂商和网站fontsquirrel使用不同的字体家族名称来区分正常,斜体,粗体文本和字体。这意味着,你将不得不重新申报字体每次你想要斜体或粗体文本,而不是一个非常强大的解决方案。另外,杂耍5-10字体,使得它很难保持你的CSS简单易行。

fontsquirrel实施:

@font-face {
    font-family: 'OpenSansLight';
    src: url('OpenSans-Light-webfont.eot');
    /* src fallbacks ommitted for brevity */
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSansLightItalic';
    src: url('OpenSans-LightItalic-webfont.eot');
    /* src fallbacks ommitted for brevity */
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSansRegular';
    src: url('OpenSans-Regular-webfont.eot');
    /* src fallbacks ommitted for brevity */
    font-style: normal;
}
这是有问题的原因有很多。例如,如果我把身体{的字体:“opensansregular”;},我会仿斜体所有< EM >网页元素(不好的)。修理它,我会设置字体样式:正常;字体家庭:“opensansitalic在< EM >元素。这是丑陋的CSS。
幸运的是,对于webfonts CSS3工作规范允许使用多个@的字体相同的字体和不同的描述:

我的执行:

/* Light */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Light-webfont.eot');
    /* src fallbacks ommitted for brevity */
    font-weight: 200;
    font-style: normal;
}
/* Light Italic */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-LightItalic-webfont.eot');
    /* src fallbacks ommitted for brevity */
    font-weight: 200;
    font-style: italic;
}
/* Regular */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    /* src fallbacks ommitted for brevity */
    font-weight: normal;
    font-weight: 400;
    font-style: normal;
}
(你可以下载完整的工具包,包括样式和字体文件,

此方法允许Open Sans字体家族使用就像任何非嵌入式字体在CSS的浏览器下载,并在合适的字体文件交换时,文本有不同的字体或字体样式属性权重。这将在所有的浏览器中工作,它完全支持“字体”面语法。如果你在支持IE 7和8感兴趣,这一招来自Smashing Magazine可以应用到我的样式表。

结束

使用相同的字体和不同的描述多@font-face规则嵌入webfonts将使你的CSS的清洁,并确保人们浏览你的网站看到的字体为目的,没有丑陋的人造黑体或仿斜体。我创建了一个开放的SAN这样的字体包,你可以在这里下载

英文原文:http://qrohlf.com/posts/better-opensans/

本文链接:http://www.w3cdream.com/content-sort-5-article-521.html

常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

前端资源

热点文章

新闻资讯

标签云

友情赞助