我一直在建立一个响应式布局的网站(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(桌面)的最新版本中运行.
我真的不知道为什么它不适用于移动版本,即使它是旧的版本,旧版本支持font-face,对吧？我试过通过改变.eot类型或包括一个笑脸来显示字体(显然它做了一些事情).关于移动版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}
我能够在网页中嵌入并设置字体样式,以便在Android和iPhone上查看,并且工作正常.但是,它不会在Windows Phone 7.5上呈现.
我已经尝试将字体嵌入到CSS中:
@font-face {
font-family:'MyFont';
src: url(data:font/woff;charset=utf-8;base64,d09GR...
}
...还提供了eot/ttf文件,使用适用于所有其他浏览器的声明 -
@font-face {font-family:'MyFont';src:url('../fonts/MyFont-webfont.eot');src:url('../fonts/MyFont-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/MyFont-webfont.svg#MyFontRegular') format('svg'), url('../fonts/MyFont-webfont.woff')format('woff'), url('../fonts/MyFont-webfont.ttf') format('truetype');font-weight:normal;font-style:normal;}
......但仍然没有运气.我无法相信新的Windows手机不允许字体嵌入,只支持有限的字体列表,如下所述:
http://msdn.microsoft.com/en-us/library/hh202920%28v=vs.92%29.aspx
即使它是一个Javascript渲染解决方案,任何见解/提示或提示都会很棒......必须有某种解决方法!