woff字体
我一直在尝试使用一种名为Oswald的WOFF字体并将其加载到本地,因为对Google Web字体的外部请求有时充其量是缓慢的。 它适用于Chrome和IE9,但不适用于Firefox! 调查开始了……
还有一些正在流产。
为什么要使用WOFF?
使用WOFF有三个主要好处:
- 字体数据是压缩的,因此与使用等效的未压缩TrueType或OpenType文件的站点相比,使用WOFF的站点将使用较少的带宽并且加载速度更快。
- 许多不愿许可其TrueType或OpenType格式字体在网络上使用的字体供应商将许可WOFF格式字体。 这可以提高网站设计者字体的可用性。
- 专有和免费软件浏览器供应商都喜欢WOFF格式,因此它有可能成为Web上一种真正通用的,可互操作的字体格式,这与其他当前的字体格式不同。
如何解决这个问题!
Mozilla在关于Web开放字体格式(WOFF)的页面上显示“本文需要技术审查。” 我可能不得不同意这一点。
此页面说的Firefox 3.6+支持WOFF类型与所有冰雹@字体面。
我读到Apache需要通过定义专用的MIME类型来支持woff 类型 。 .htaccess中还有一些用于到期和压缩的部分。
AddType application/x-font-woff .woff
这没有帮助。
现在跳转到真棒网站caniuse.com,它可以分析我是否可以使用WOFF? 。 这使我在Mozilla hacks博客上找到了另一篇有关WOFF的文章 。 两者都说支持。 这篇文章建议也为那些不支持WOFF的浏览器指定TTF字体类型。
@font-face {
font-family: GentiumTest;
src: url(fonts/GenR102.woff) format("woff"),
url(fonts/GenR102.ttf) format("truetype");
}
[blockquote class =” left”] WOFF格式的字体被压缩但未加密,那些寻求严格控制和控制字体使用机制的人不应将其视为“安全”格式。[/ blockquote]
使用JavaScript加载字体似乎可以工作,但仍然会挂起对本地字体(在CSS中指定)的请求。
可以使用PHP嗅探来特定于FirefoxJavaScript加载,但无法提供与@ font-face相同CSS的解决方案。
所以现在我尝试添加一些.htaccess apache MIME类型。
#add support for FONT TYPES AddType application/x-font-woff .woff AddType application/vnd.ms-fontobject .eot
Header set cache-control: public ExpiresActive on ExpiresByType font/ttf "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
答对了! 似乎已经为3工作! 但是,仍然有6个WOFF文件挂起的请求。 现在,我认为它们可能是同一字体的不同版本,例如粗体,细体等。
绝对没有文件!
免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
这是我CSS...。 Mozilla发生了什么事? 有任何想法吗?
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
src: local('Oswald Bold'), local('Oswald-Bold'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
src: local('Oswald Light'), local('Oswald-Light'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: local('Oswald Regular'), local('Oswald-Regular'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
/* custom font */
h1 {
font-family: 'Oswald', sans-serif;
}
woff字体