我一直在构建一个具有响应式布局的网站 ( http://www.hallometmirel.nl/troep/website ),并且一直在我的笔记本电脑和 Galaxy S3 上的几种浏览器和分辨率中测试各种分辨率。
鉴于我无法在 Google Play 上获取 Internet Explorer,我现在正在上班的诺基亚 Lumia 800 上测试该网站。它似乎运行的是 Windows Phone 7.5,由于我找不到显示它是哪个版本的 IE 的按钮,而且智能手机很新,我怀疑它是 IE 9。
到目前为止,@font-face 一直在最新版本的 Opera、Firefox、Chrome(桌面和移动)和 IE 9(桌面)中工作。
我真的不知道为什么它在移动版本中不起作用,即使它是旧版本,旧版本也支持字体,对吧?我尝试通过更改 .eot 类型或包含笑脸来欺骗 IE 来显示字体(显然它做了一些事情)。我找不到关于 IE 移动版的其他主题。
这是 doc 类型,它可能与 IE9 有关:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="nl-NL">
<head xmlns:og="http://ogp.me/ns#">
这就是我嵌入字体的方式:
@font-face {
font-family:'ChaletComprime-CologneEighty';
src:url('fonts/ChaletComprime-CologneEighty.eot');
src:url('fonts/ChaletComprime-CologneEighty.eot?#iefix') format('embedded-opentype'),
url('fonts/ChaletComprime-CologneEighty.woff') format('woff'),
url('fonts/ChaletComprime-CologneEighty.ttf') format('truetype'),
url('fonts/ChaletComprime-CologneEighty.svg#svg/ChaletComprime-CologneEighty') format('svg')
}
并像这样使用它:
h1,h2,h3,h4,h5,h6{font-family:ChaletComprime-CologneEighty;color:#ef0f63;text-transform:uppercase}