CSS @font-face 有时在 Internet Explorer 中有效,但并非总是有效

2024-05-23

我在使用 Internet Explorer 11 中的网络字体时遇到问题。该字体适用于某些使用 IE11 的用户,但不适用于其他用户,即使它们是同一浏览器。对于遇到问题的用户,Modernizr.fontface 仍然返回 true,因此我可以排除这种情况。

下面是CSS...

@font-face {
    font-family: 'Balthazar';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/Balthazar/Balthazar.eot'); /* IE9 Compat Modes */
    src: local('Balthazar Regular'), 
         local('Balthazar-Regular'),
         url('/assets/fonts/Balthazar/Balthazar.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/assets/fonts/Balthazar/Balthazar.woff2') format('woff2'), /* Modern Browsers */
         url('/assets/fonts/Balthazar/Balthazar.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/assets/fonts/Balthazar/Balthazar.svg#Balthazar-Regular') format('svg'); /* Legacy iOS */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
<remove fileExtension=".woff"/>
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<remove fileExtension=".woff2"/>
<mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
<remove fileExtension=".ttf"/>
<mimeMap fileExtension=".ttf" mimeType="application/x-font-ttf" />
<remove fileExtension=".eot"/>
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<remove fileExtension=".svg"/>
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<remove fileExtension=".svgz"/>
<mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />

IE 尝试渲染 ttf 文件,因此我认为这可能是 mime 类型问题。部分原因是:我将 mime 类型更新为 application/x-font-ttf ,这为至少一个用户修复了该问题,但另外两个用户仍然遇到该问题。然后我尝试在 WOFF2 之后添加 WOFF,但仍然不起作用。

我不知所措。请帮忙。


试试这些...

1. 检查 DRM 错误

IE 11“防弹”字体和后退字体不起作用 https://stackoverflow.com/questions/21054158/ie-11-bulletproof-font-face-and-fall-back-fonts-not-working如果您按 F12,重新加载页面,然后查看 F12 工具的控制台选项卡,您是否会看到任何错误消息,例如“@font-face OpenType 嵌入权限检查失败。”?如果这样做,则可能是字体上的 DRM 问题,IE 11 尊重这一点,而其他字体则不尊重。

2.(再次)检查MIME类型设置

确保 mime 类型与此处的答案匹配(您列出的类型不匹配):“字体的正确 MIME 类型 https://stackoverflow.com/questions/2871655/proper-mime-type-for-fonts/10864297#10864297"

3. 确保 CSS 名称与字体文件中的名称匹配

如果这不起作用,CSS 中声明为字体名称的名称是否与文件本身中存储的名称相匹配?http://www.experts-exchange.com/Web_Development/Blogs/WordPress/Q_28367854.html http://www.experts-exchange.com/Web_Development/Blogs/WordPress/Q_28367854.html

4.使用Google Webfont加载器

如果修复 mime-types 不能解决您的问题,请尝试使用 google fonts webfont loader,如此答案中所述:https://stackoverflow.com/a/21289510/356550 https://stackoverflow.com/a/21289510/356550

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS @font-face 有时在 Internet Explorer 中有效,但并非总是有效 的相关文章

  • 的 CSS margin-top 影响父级的边距

    我已经研究这个问题有一段时间了 但还没有找到直接的答案 当向元素添加页边距顶部时 就我而言 它主要发生在标题上 在许多情况下 边距顶部是与父级共享的 HTML div h1 My title h1 div CSS div padding 2

  • Firefox 30 不再隐藏选择框箭头

    我一直使用的 技巧 是 select moz appearance none text indent 0 01px text overflow 在 FF 上进行自定义选择框 但自从版本 30 发布以来 它完全停止工作 我试图找出这是否已被弃
  • 如何使 CSS 样式覆盖 JavaScript 应用的样式

    我动态创建一个 HTML 表 并应用一些样式 var tbl document createElement table tbl id CrewMemberTable document getElementById CrewMemberPan
  • SWC with JavaScript:如何处理 CSS 导入以及如何绝对导入?

    TL DR 如何告诉 SWC 编译 React 组件中导入的 CSS 文件 如何告诉 SWC 在测试和 React 组件中编译绝对导入 这是一个最小的可重现示例 https github com janhesters riteway swc
  • 将焦点和光标设置到文本输入字段/字符串 w 的末尾。 Jquery [重复]

    这个问题在这里已经有答案了 我有以下函数 将选择器添加到搜索输入作为高级选项 就像堆栈溢出高级搜索一样 当您单击要搜索的内容时 它会添加一个前缀 请参阅下面的 Jquery
  • Chrome 扩展:插入固定 div 作为 UI

    我想使用 chrome 扩展将 div 插入固定位置 它将覆盖您当前正在查看的页面 我担心的是 我希望它可以在任何页面上工作而不改变它 除了插入我的固定 div 之外 但我不知道我这样做的方式是否可行 目前 该按钮不会显示 并且我在让 di
  • 如何将两个图像放置在一个div的对角

    如你所见 我不是 CSS 专家 我需要一些帮助来了解如何使用两个图像制作这个 div 如下图所示 托马斯是对的 但还有更好的解决方案 div img class align left src alt description of your
  • 在 Chrome 中,应用于包含图像的锚点的轮廓高度不正确

    对于我正在开发的网站 我希望当链接聚焦 悬停 活动时 链接周围会出现虚线轮廓 我希望文本和图像链接发生这种情况 我遇到的问题是 虽然我的代码在 Firefox 和 IE 中运行良好 但在 Chrome 7 0 517 41 中 虚线轮廓与我
  • 获取 CSS 计算结果以设置自定义属性

    我正在测试一个 CSS 框架 用于通过微类指定数字 例如 类似的东西 div class fifty percent wide 可能会翻译成width 50 该实现使用 CSS 变量 自定义属性 考虑以下 CSS fifty number
  • 使用 PHP 将 class="active" 添加到活动页面

    动态标头 CSS 类更改为活动使用 PHP 目录 我想要的班级 li 在活动目录下更改标签 现在 每个指南都向我展示了当您的页面等于它时如何执行此操作 但我想更改 这 li li 取决于我所在的目录 例如 如果说我在 http exampl
  • 如何实现右边缘倾斜的 div? [复制]

    这个问题在这里已经有答案了 我几天来一直在寻找使 div 的右边缘倾斜 45 度的代码 这是我特别想要得到的图像示例 似乎有很多 倾斜边缘 div 的示例 但我找不到任何具有特定右侧倾斜的示例 我花了很多时间试图改变其他人的代码 但结果却一
  • 使用jquery和css点击按钮后旋转div文本

    我想使用 jquery 和 css 单击按钮后旋转 div 文本 如果用户点击Rotate Left按钮 然后文本在左侧旋转 or用户点击Rotate Right按钮然后文本在右侧旋转 Example div Happy Birthday
  • CSS:多属性选择器

    我想设置 电子邮件 和 密码 类型的表单输入样式 但不设置其他任何样式 我正在想象类似以下的事情 input type email type password 然而 属性选择器的工作方式似乎将其解释为 输入 其中类型同时是 电子邮件 and
  • 输入和文本字段中的背景颜色

    我想更改表单文本和输入字段中的颜色背景 但是当我这样做时 它也会影响提交按钮 是否可以通过其他不影响按钮的方式来完成 我用过这段代码 input textarea background color d1d1d1 input type tex
  • 夜间值班。单击带有文本的元素

    我遇到问题 无法单击具有某些独特文本的网页元素 我有这样的结构 div class wg wagon type title Text div 我试试这个 click wg wagon type title contains Text 但我有
  • 使组合高度等于浏览器窗口的高度

    http featuredfotografer com http featuredfotografer com Codemirror div 与 header div 结合占用的高度超过了浏览器的高度 我怎样才能使它们的总高度达到浏览器窗口
  • 仅水平 CSS 视差效果,层数大于 100vw

    如何用水平引导网站仅 CSS 视差效果 要求 仅 CSS 视差 父层必须具有宽度 高度 100vw 100vh 子层的宽度 高度必须 gt 100vw 100vh child layers must visually align 100 w
  • Google 再营销标签 - iframe 高度问题

    我注意到 Google 的再营销代码会在我的页面底部插入一个 iframe 问题是 iframe 弄乱了我的布局 它的高度为 13 像素 并且在底部留下了空白的白色垂直空间 我尝试用 css 隐藏它 但它在 IE9 中仍然可见 iframe
  • 文本后面有粗下划线

    如何使用 span 和 css 在文本 ABC 后面重现这种下划线 我已经能够做下划线below嵌套的文本span和彩色的border bottom 但无法获取behind图像和above文本基线 p style font size 48p
  • 如何更改 Shiny 中 navbarPage 折叠的断点

    我想用shiny navbarPage collapsible TRUE 当在小屏幕上查看我的 Shiny 应用程序时 将导航元素折叠到菜单中 默认情况下 当浏览器宽度小于 940 像素时会触发折叠 有什么方法可以改变这一点 以便在稍大的浏

随机推荐

  • kdb+ 32bit 的性能表现如何

    Kx 宣布 http kx com press releases 140402 php their 免费 kdb http www kxcommunity com 32位 时间序列数据库 我们通常可以期望该数据库的每秒读 写性能如何 我确实
  • Python - UnicodeDecodeError:“charmap”编解码器无法解码位置 44 中的字节 0x81:字符映射到 <未定义>

    在 Python 3 Jupyter 笔记本上使用 pandas 我得到了 UnicodeDecodeError charmap 编解码器无法解码字节 0x81 位置 44 字符映射到 尝试读取如下所示的 json 文件时出错 Test1
  • Windows批处理脚本启动程序并退出控制台

    我有一个用于启动程序的批处理脚本 例如notepad exe 当我双击这个批处理文件时 记事本正常启动 但是黑窗cmd谁发起的notepad exe仍然在后台 我需要做什么才能启动notepad exe并使cmd窗口消失 edit 比使用更
  • Scala 如何使用我的所有核心?

    object PrefixScan sealed abstract class Tree A case class Leaf A a A extends Tree A case class Node A l Tree A r Tree A
  • Spring Boot Oauth2 资源服务器 UserDetailsS​​ervice

    尝试让 UserDetailsS ervice 为我设置的 oauth2 资源服务器工作 我能够成功验证 jwt 但我似乎没有做任何事情来让它调用 loadUserByUsername 方法 最初使用 SAML 并且它可以工作 但现在我已经
  • EMBER直接路由URL访问不加载数据

    当我直接从浏览器访问我的网址时遇到问题 它不会加载我的单一帖子信息 示例 index html posts 10052308 但当我访问 index html posts 然后单击我的一篇文章时 它会起作用 我的网址会更改为 index h
  • Linux 上的基准测试程序

    对于一项任务 我们需要使用不同的优化和参数来对我们的实现进行基准测试 有没有一种可行的方法可以在Linux命令行 我知道时间 上使用不同的参数对小程序进行基准测试 从而为我提供CSV或类似内容的时间数据 输出可能类似于 Implementa
  • ggplot2中的两列分组

    是否可以按两列分组 于是叉积就画出来了 经过geom point and geom smooth 例如 frame lt data frame series lt rep c a b 6 sample lt rep c glass wate
  • 如何使用反应导航在导航抽屉中添加部分分隔符

    假设我的抽屉导航中有五个项目 我想在三个项目之后添加分隔符 如何使用反应导航添加它 正如提到的 vonovak 你可以通过使用来实现这一点contentComponent允许完全定制抽屉 为此 您需要创建自定义组件来覆盖默认抽屉 代码示例
  • 确定哪个元素具有焦点[重复]

    这个问题在这里已经有答案了 可能的重复 如何判断html页面的哪个元素获得焦点 https stackoverflow com questions 483741 how to determine which html page elemen
  • 何时从容器管理的安全性转向 Apache Shiro、Spring Security 等替代方案?

    我正在尝试保护使用 JSF2 0 构建的应用程序的安全 我很困惑人们什么时候会选择使用 Shiro Spring Security 或 owasp 的 esapi 等安全替代方案 而放弃容器管理的安全性 看过一些相关问题 https sta
  • 使用卡尔曼滤波器跟踪位置和速度

    我正在使用卡尔曼滤波器 恒定速度模型 来跟踪物体的位置和速度 我测量对象的 x y 并跟踪 x y vx vy 这是有效的 但是如果在传感器读数 x y vx vy 上添加 20 mm 的高斯噪声 即使该点没有移动 只是噪声也会发生波动 对
  • 找到 4 个特定的角像素并将它们与扭曲透视一起使用

    我正在使用 OpenCV 我想知道如何构建一个简单版本的透视变换程序 我有一张平行四边形的图像 它的每个角都由具有特定颜色的像素组成 该像素在图像中没有其他位置 我想遍历所有像素并找到这 4 个像素 然后我想将它们用作新图像中的角点 以扭曲
  • 如何在 Powershell 中设置低 I/O(“后台”)优先级

    There s 这个powershell脚本 https stackoverflow com a 4302 1266650它可以将进程的优先级从 空闲 设置为 实时 但某些工具提供另一个优先级 该优先级甚至会降低进程的优先级 如何在 Pow
  • 如何使用 C# 中的 Caliburn.Micro 从 ListView 获取选定的项目和事件?

    我使用 Caliburn Micro 库用 MVVM C 和 XAML 编写了一个程序 我怎样才能 get all选定的项目 不仅是一项 获取选定的更改事件 通过单击标题列对项目进行排序 任何帮助 将不胜感激 图形用户界面代码 视图 Mai
  • 使用 Maven 创建 tar.gz 存档

    我有一个 Maven 项目 在 src main 目录下有一个名为 output 的子目录 该文件夹需要打包成tar gz 使用程序集插件时如下 来自 pom xml
  • Spring 与 Apache Beam

    我想将 Spring 与 Apache Beam 结合使用 它将在 Google Cloud Data flow Runner 上运行 数据流作业应该能够在执行管道步骤时使用 Spring 运行时应用程序上下文 我想在 Apache Bea
  • 可感知的最短应用响应延迟是多少?

    用户操作和应用程序响应之间总是会发生延迟 众所周知 响应延迟越低 应用程序瞬间响应的感觉就越强烈 众所周知 高达 100 毫秒的延迟通常是无法察觉的 但是 110ms 的延迟又如何呢 可感知的最短应用响应延迟是多少 我对任何确凿的证据 一般
  • where 子句中的双 %% ?

    我有一个 where 子句 如下例所示 WHERE subject LIKE chef AND dep LIKE psy 使用 1 或 2 符号有什么区别 我知道其中一个的含义 通配符 但不知道第二个添加的功能是什么 该查询可能是一个拼写错
  • CSS @font-face 有时在 Internet Explorer 中有效,但并非总是有效

    我在使用 Internet Explorer 11 中的网络字体时遇到问题 该字体适用于某些使用 IE11 的用户 但不适用于其他用户 即使它们是同一浏览器 对于遇到问题的用户 Modernizr fontface 仍然返回 true 因此