@ font-face声明在Android 4.3 Internet浏览器中不工作？

本文介绍了@ font-face声明在Android 4.3 Internet浏览器中不工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我的Samsung Galaxy S3手机最近已从Android 4.1.3升级到Android 4.3。现在我设计的几个网站，我测试在Android互联网浏览器不显示字体我已声明与 @ font-face 。我需要做什么来解决这个问题？ 其中一个网站（开发版本）： http://beta.kdfansite.com 以下是Open Sans的一些相关CSS： @ font-face { font-family：'OpenSansSemibold'; src：url（'http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot'）; src：url（'http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot?#iefix'）format（' embedded-opentype'）， url（'http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.woff'）格式（ 'woff'）， url（'http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.ttf'）format（' truetype'）， url（'http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.svg#OpenSansSemibold'）格式（ 'svg'）; font-weight：normal; font-style：normal; } / * ... * / h2 { font-family：'OpenSansSemibold'，Arial，sans-serif; / * ... * / } 网站以类似的方式声明。伟大的Vibes声明（也在custom.css）为享受你的骑消息是另一个比较。所有字体在同一设备上的Chrome（Android版）和Firefox（Android版）中都可以正常显示，但不能在Android Internet上显示。 我需要尽快完成此CSS作为志愿者在这个项目上工作（未支付）。所以我正在寻找一个快速修复，而不是代码审查。我也是一个UX设计师，而不是一个Web开发人员。提前感谢。 编辑：我今天在Edge Inspect CC和weinre中进行了一些额外的调试，将我的Android手机和iPad我的笔记本电脑。在Weinre，我可以改变iPad上的字体，但不能在手机上。我可以更改两个设备上的字体颜色。因此，当我使用远程调试器时，我无法更改默认字体的字体，因此它的基本问题是相关的。解决方案 我只在移动设备上使用svg进行媒体查询。 @media only screen and（max-width：320px）{ @ font-face { font-family：'open_sansbold'; src：url（'OpenSans-Bold-webfont.svg＃open_sansbold'）format（'svg'）; font-weight：normal; font-style：normal; } } @media only screen and（max-device-width：720px）and（orientation：portrait）{ @ font-face { font- family：'open_sansbold'; src：url（'OpenSans-Bold-webfont.svg＃open_sansbold'）format（'svg'）; font-weight：normal; font-style：normal; } } @media only screen and（max-device-width：1280px）and（orientation：landscape）{ @ font-face { font-family：'open_sansbold'; src：url（'OpenSans-Bold-webfont.svg＃open_sansbold'）format（'svg'）; font-weight：normal; font-style：normal; } } 希望它帮助你。 My Samsung Galaxy S3 phone recently upgraded from Android 4.1.3 to Android 4.3. Now several websites I designed which I tested in the Android internet browser are not displaying fonts I have declared with @font-face. What do I need to do to fix this?One of the sites (development version): http://beta.kdfansite.comHere is some of the related CSS for Open Sans: @font-face { font-family: 'OpenSansSemibold'; src: url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot'); src: url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.woff') format('woff'), url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.ttf') format('truetype'), url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg'); font-weight: normal; font-style: normal;}/* ... */h2 { font-family: 'OpenSansSemibold', Arial, sans-serif; /* ... */}Each font I use on the site is declared in a similar way. The Great Vibes declaration (also in custom.css) for the "enjoy your ride" message is another one to compare. All fonts display properly in Chrome for Android and Firefox for Android on the same device, but not in Android Internet.I need to finalize this CSS as soon as possible and am working on this project as a volunteer (not paid). So I am looking for a quick fix rather than a code review. I'm also a UX designer, not a web developer. Thanks in advance.Edit: I did some additional debugging today in Edge Inspect CC and weinre, connecting both my Android phone and my iPad to my laptop. In Weinre, I am able to change the font families on the iPad but not on the phone. I can change the font colors on both devices. So it appears the underlying issue is related to the fact that I can't change the fonts off of the defaults when I use a remote debugger. 解决方案 I have the same issue here how i solve it.I only use svg on mobile with media queries.@media only screen and (max-width: 320px) {@font-face { font-family: 'open_sansbold'; src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal;}}@media only screen and (max-device-width: 720px) and (orientation:portrait) { @font-face { font-family: 'open_sansbold'; src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; }}@media only screen and (max-device-width: 1280px) and (orientation:landscape) { @font-face { font-family: 'open_sansbold'; src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; }}Hope it's help you. 这篇关于@ font-face声明在Android 4.3 Internet浏览器中不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！