gpt4 book ai didi

css - Bulletproof 和 FontSquirrel 字体方法在 IE10 中不起作用

转载 作者:行者123 更新时间:2023-12-02 05:01:40 24 4
gpt4 key购买 nike

首先我应该提到我在 Tumblr 上工作,所以我在服务器端的东西方面有些受限。我知道这里有很多关于@font-face 的问题,但我就是找不到让它在 IE9 和 10 中工作的解决方案。我使用的是 FontSquirrel 语法:

@font-face {
font-family: 'FontName';
font-weight: 400;
font-style: normal;
src: url('fontname.eot');
src: url('fontname.eot?#iefix') format('embedded-opentype'),
url('fontname.woff') format('woff'),
url('fontname.ttf') format('truetype'),
url('fontname.svg#FontName') format('svg');
}

直到我发现它在 Firefox 或 IE 9/10 中不起作用,所以我一直在转换为使用 base64 编码,基于 FontSquirrel 模板并在 base64fonts.com 上对 .woff 文件进行编码:

    @font-face {
font-family: 'FontName';
font-weight: 400;
font-style: normal;
src: url('fontname.eot');
}
@font-face {
font-family: 'FontName';
font-weight: 400;
font-style: normal;
src: url(data:application/x-font-woff;charset=utf-8;base64,......) format('woff'),
url('fontname.ttf') format('truetype'),
url('fontname.svg#FontName') format('svg');
}

(代表 base64 字符的巨大字符串的点串)。这在 Chrome 和 Firefox 中效果很好,似乎在 IE8 中也能正常工作,但似乎没有任何按摩可以使 IE10 呈现除了丑陋的系统字体以外的任何东西。

我试过单引号,双引号,没有引号。我已确保 .ttf 具有可嵌入的权限。我什至尝试摆脱我的文档类型。我读了 bulletproof语法并尝试了这些 examples .当我在 IE10 中加载该示例页面时,除了其中几个之外,所有页面都可以正常显示;但在我的页面上使用相同的语法不起作用。

如果您想查看我的可怕代码,请访问 gist.github.com/neuraldamage/5307289(如您所见,我已经尝试了很多字体),相关站点位于 neuraldamage.tumblr.com。有任何想法吗?谢谢!

编辑:

想知道这是否是 IE 9/10 不喜欢 Tumblr 静态文件的问题?我的代码来自 gist.github.com/neuraldamage/5307289 的真实示例:

@font-face {
font-family: 'Gudea';
font-weight: 400;
font-style: normal;
src: url('http://static.tumblr.com/6u5yyqj/cDgmgcczj/gudea-regular-webfont.eot');
src: url('http://static.tumblr.com/6u5yyqj/cDgmgcczj/gudea-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://static.tumblr.com/6u5yyqj/Qkvmgcd2c/gudea-regular-webfont.woff') format('woff'),
url('http://static.tumblr.com/6u5yyqj/LIamgcd1z/gudea-regular-webfont.ttf') format('truetype'),
url('http://static.tumblr.com/6u5yyqj/K3Nmgcd0s/gudea-regular-webfont.svg#Gudea') format('svg');
}

必须截断 base64 编码才能使其适合:

@font-face {
font-family: 'FunctionPro';
font-weight: 400;
font-style: normal;
src: url('http://static.tumblr.com/6u5yyqj/OXFmhmdhl/functionpro-light-webfont.eot');
}
@font-face {
font-family: 'FunctionPro';
font-weight: 400;
font-style: normal;
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAGvkAB......FQNRtdAAA=) format('woff'),
url('http://static.tumblr.com/6u5yyqj/8SEmhmdin/functionpro-light-webfont.ttf') format('truetype'),
url('http://static.tumblr.com/6u5yyqj/vIVmhmdi7/functionpro-light-webfont.svg#FunctionPro') format('svg');
}

最佳答案

您页面上的最终 html 标记显示两个 DOCTYPE,只允许一个 DOCTYPE,并且它必须出现在任何元素之前。当您遇到如此严重的错误时,IE 通常会感到困惑并且在其他解析时也会失败。

与 w3c 验证相同:http://validator.w3.org/check?uri=http%3A%2F%2Fneuraldamage.tumblr.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

虽然修复所有 w3c 错误来调试这个问题并不是必需的,但我觉得这个错误会阻止找到答案或首先导致问题。

第 1 行

**<!DOCTYPE html>**

第 13 行

**<html xmlns="http://www.w3.org/1999/xhtml">**

如果可能,我会选择保留 html5 文档类型(第一个)

关于css - Bulletproof 和 FontSquirrel 字体方法在 IE10 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15801726/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com