热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

@font-face正在Firefox中删除字母-@font-faceisdroppinglettersinFirefox

IhaveMuseo-300mostlyworkingwith@font-face,butcertainlettercombinationslikeffandfi

I have Museo-300 mostly working with @font-face, but certain letter combinations like "ff" and "fi" are disappearing in Firefox (confirmed in v3.6 and v7.0.1). So "microfinance" becomes "micronance".

我有Museo-300主要使用@ font-face,但某些字母组合如“ff”和“fi”在Firefox中消失(在v3.6和v7.0.1中确认)。所以“小额信贷”变成“微量”。

Note that I'm outputting these as individual letters, not as ligatures. When I view source on both the server and the browser, "coffee" for example is spelled with all six letters individually—not a unicode ligature character for "ff".

请注意,我将这些输出为单个字母,而不是连字。当我在服务器和浏览器上查看源时,例如“coffee”拼写为所有六个字母 - 而不是“ff”的unicode连字符。

The output looks right in Opera, Chrome, Safari, and IE (even IE6).

输出看起来在Opera,Chrome,Safari和IE(甚至是IE6)中都是正确的。

I downloaded Museo-300 from MyFonts along with their web font example template.

我从MyFonts下载了Museo-300及其网络字体示例模板。

 @font-face {
 font-family: 'Museo-300';
 src: url('webfonts/151B6C_0.eot');
 src: url('webfonts/151B6C_0.eot?#iefix') format('embedded-opentype'),url('webfonts/151B6C_0.woff') format('woff'),url('webfonts/151B6C_0.ttf') format('truetype'),url('webfonts/151B6C_0.svg#wf') format('svg');
}

and all the referenced files are in place. I invoke it like this:

并且所有引用的文件都已到位。我像这样调用它:

    font-family: 'Museo-300', sans-serif;

I tried a different font as a test (Code Pro Light Demo, also gotten from MyFonts) and Firefox dropps "fi" but not "ff" for that one.

我尝试了一种不同的字体作为测试(Code Pro Light Demo,也来自MyFonts)和Firefox下载“fi”而不是“ff”。

An idea what's going wrong?

一个想法出了什么问题?

4 个解决方案

#1


5  

You can tell Firefox to skip looking for ligatures and treat them as regular characters by adding -moz-font-feature-settings: "liga=0" in your font-face declaration.

您可以通过在font-face声明中添加-moz-font-feature-settings:“liga = 0”来告诉Firefox跳过查找连字并将它们视为常规字符。

#2


8  

For anyone reading this in the future, note that as of FF 15 (I think) the syntax has now changed, and you'll need to use this:

对于将来阅读本文的人,请注意,从FF 15开始(我认为)语法现在已经改变了,你需要使用它:

-moz-font-feature-settings: "liga=0";
-moz-font-feature-settings: "liga" 0;

#3


1  

In case others hit this problem, I resolved it with help from MyFonts technical support. I'm not sure whether this issues is specific to MyFonts, but I suspect it affects other web font sources.

如果其他人遇到这个问题,我在MyFonts技术支持的帮助下解决了这个问题。我不确定这个问题是否特定于MyFonts,但我怀疑它会影响其他Web字体来源。

Direct (Solvable) Cause

直接(可解决)原因

When a standard True Type font (TTF) gets processed into the multiple versions that are useful for a web font (EOT, SVG, WOFF), the processing tool or vendor can decide whether or not to include the font's full character set. Some will default to a reduced character set to reduce file sizes.

当标准True Type字体(TTF)被处理为对Web字体(EOT,SVG,WOFF)有用的多个版本时,处理工具或供应商可以决定是否包括字体的完整字符集。有些将默认为缩小字符集以减小文件大小。

In my case, one or more of the generated web font files excluded ligatures, presumably considering them to be non-essential typographic tweaks. To fix the problem I used a custom web font builder at MyFonts to generate font files with the full character set.

在我的例子中,一个或多个生成的Web字体文件排除了连字,大概认为它们是非必要的排版调整。为了解决这个问题,我在MyFonts使用了一个自定义Web字体构建器来生成具有完整字符集的字体文件。

(For MyFonts specifically this was at Order History > select relevant font > Webfont Kit Builder tab > Advanced, then check both "Complete Character Set" and "Keep OpenType Layout".)

(对于MyFonts,特别是订单历史>选择相关字体> Webfont Kit Builder选项卡>高级,然后检查“完整字符集”和“保留OpenType布局”。)

Underlying Cause

根本原因

My belief, which is only an educated guess:

我的信念,这只是一个有根据的猜测:

I think Firefox is going out of its way to do nice typography, more so than other browsers. So when it sees something that it could render as a ligature ("fi", "fl", "ff", etc.) it tries to render the letters as a single ligature glyph rather than as two distinct characters. If your web font doesn't include the ligature glyphs, your letters will disappear. (If my guess is right, I'm surprised I haven't read about this problem before.)

我认为Firefox比其他浏览器更能做出漂亮的排版。因此,当它看到可以呈现为连字(“fi”,“fl”,“ff”等)的东西时,它会尝试将字母渲染为单个连字字形而不是两个不同的字符。如果您的网络字体不包含连字字形,则您的字母将消失。 (如果我的猜测是对的,我很惊讶我之前没有读过这个问题。)

#4


1  

Myfonts.com recently changed some display settings. Their support wrote back very quickly with the following info:

Myfonts.com最近更改了一些显示设置。他们的支持很快回复了以下信息:

If you click on the Font image (the image that shows the sample), which is located right above Kit Options, you will see the Complete Character set and Keep OpenType Layout options.

如果单击位于“工具箱选项”上方的“字体”图像(显示示例的图像),您将看到“完整字符集”和“保留OpenType布局”选项。

This view is not currently available through Firefox though, but I was able to download the complete character sets using IE9.

这个视图目前不能通过Firefox获得,但我能够使用IE9下载完整的字符集。


推荐阅读
  • POJ 2482 星空中的星星:利用线段树与扫描线算法解决
    在《POJ 2482 星空中的星星》问题中,通过运用线段树和扫描线算法,可以高效地解决星星在窗口内的计数问题。该方法不仅能够快速处理大规模数据,还能确保时间复杂度的最优性,适用于各种复杂的星空模拟场景。 ... [详细]
  • PHP预处理常量详解:如何定义与使用常量 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • PTArchiver工作原理详解与应用分析
    PTArchiver工作原理及其应用分析本文详细解析了PTArchiver的工作机制,探讨了其在数据归档和管理中的应用。PTArchiver通过高效的压缩算法和灵活的存储策略,实现了对大规模数据的高效管理和长期保存。文章还介绍了其在企业级数据备份、历史数据迁移等场景中的实际应用案例,为用户提供了实用的操作建议和技术支持。 ... [详细]
  • 【问题】在Android开发中,当为EditText添加TextWatcher并实现onTextChanged方法时,会遇到一个问题:即使只对EditText进行一次修改(例如使用删除键删除一个字符),该方法也会被频繁触发。这不仅影响性能,还可能导致逻辑错误。本文将探讨这一问题的原因,并提供有效的解决方案,包括使用Handler或计时器来限制方法的调用频率,以及通过自定义TextWatcher来优化事件处理,从而提高应用的稳定性和用户体验。 ... [详细]
  • 本文介绍了如何利用Shell脚本高效地部署MHA(MySQL High Availability)高可用集群。通过详细的脚本编写和配置示例,展示了自动化部署过程中的关键步骤和注意事项。该方法不仅简化了集群的部署流程,还提高了系统的稳定性和可用性。 ... [详细]
  • 为了确保iOS应用能够安全地访问网站数据,本文介绍了如何在Nginx服务器上轻松配置CertBot以实现SSL证书的自动化管理。通过这一过程,可以确保应用始终使用HTTPS协议,从而提升数据传输的安全性和可靠性。文章详细阐述了配置步骤和常见问题的解决方法,帮助读者快速上手并成功部署SSL证书。 ... [详细]
  • 题目要求维护一个数列,并支持两种操作:一是查询操作,语法为QL,用于查询数列末尾L个数中的最大值;二是更新操作,用于修改数列中的某个元素。本文通过ST表(Sparse Table)优化查询效率,确保在O(1)时间内完成查询,同时保持较低的预处理时间复杂度。 ... [详细]
  • 本指南从零开始介绍Scala编程语言的基础知识,重点讲解了Scala解释器REPL(读取-求值-打印-循环)的使用方法。REPL是Scala开发中的重要工具,能够帮助初学者快速理解和实践Scala的基本语法和特性。通过详细的示例和练习,读者将能够熟练掌握Scala的基础概念和编程技巧。 ... [详细]
  • 本文深入解析了Java面向对象编程的核心概念及其应用,重点探讨了面向对象的三大特性:封装、继承和多态。封装确保了数据的安全性和代码的可维护性;继承支持代码的重用和扩展;多态则增强了程序的灵活性和可扩展性。通过具体示例,文章详细阐述了这些特性在实际开发中的应用和优势。 ... [详细]
  • 具备括号和分数功能的高级四则运算计算器
    本研究基于C语言开发了一款支持括号和分数运算的高级四则运算计算器。该计算器通过模拟手算过程,对每个运算符进行优先级标记,并按优先级从高到低依次执行计算。其中,加减运算的优先级最低,为0。此外,该计算器还支持复杂的分数运算,能够处理包含括号的表达式,提高了计算的准确性和灵活性。 ... [详细]
  • 本文探讨了 Kafka 集群的高效部署与优化策略。首先介绍了 Kafka 的下载与安装步骤,包括从官方网站获取最新版本的压缩包并进行解压。随后详细讨论了集群配置的最佳实践,涵盖节点选择、网络优化和性能调优等方面,旨在提升系统的稳定性和处理能力。此外,还提供了常见的故障排查方法和监控方案,帮助运维人员更好地管理和维护 Kafka 集群。 ... [详细]
  • 投融资周报 | Circle 达成 4 亿美元融资协议,唯一艺术平台 A 轮融资超千万美元 ... [详细]
  • 如何高效启动大数据应用之旅?
    在前一篇文章中,我探讨了大数据的定义及其与数据挖掘的区别。本文将重点介绍如何高效启动大数据应用项目,涵盖关键步骤和最佳实践,帮助读者快速踏上大数据之旅。 ... [详细]
  • 深入解析Spring Boot启动过程中Netty异步架构的工作原理与应用
    深入解析Spring Boot启动过程中Netty异步架构的工作原理与应用 ... [详细]
author-avatar
Lululingling2002_886
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有