“您的字体在 Opera 移动版上显示很奇怪。”
感谢您抽出时间告知我。 请您发送一个截图，方便我查看吗？
哇，这真是奇怪。 我使用自定义字体，通过 @font-face 和第三方服务。 这不仅仅是自定义字体无法加载，然后回退到另一种字体的问题，这种字体可能看起来很奇怪，因为间距等方面不同。 看起来
- 某些字符在正确的 @font-face 字体中渲染
- 某些字符在回退字体中渲染
- 某些字符根本无法渲染（带有 x 的方框）
首先，我知道有两种类型的 Opera 移动浏览器。 “Opera Mini” 和 “Opera Mobile”。 我应该快速了解一下。
{搜索 “opera mini 和 opera mobile”。}
发现一些奇怪的论坛帖子，点了一下，最后来到 一篇不错的博文，解释了它们之间的区别。
在 Opera Mini 中，Opera Presto 浏览器引擎位于服务器上。 在 Opera Mobile 中，它安装在您的手机上。
给我发邮件说字体问题的人说那是 Opera Mobile，所以我会先测试它。 但是，正如我所想，世界上每个人都不知道手机上甚至有不同类型的 Opera 浏览器，如果需要，我会测试另一个浏览器。 事实上，这似乎有点像是 Mini 出现了问题，因为我能想象一个服务器端渲染引擎可能会做一些特殊的操作，比如“仅等待 X 秒”来获取第三方资源，或者类似的事情，导致字体文件下载一半就停止了。
我想知道我是否可以自己复制这个问题。
我这里有个 Kindle Fire，但是它上面有那个奇怪的亚马逊 Silk 浏览器，我认为它不允许我下载任何其他浏览器。 我有一台 Nexus 7，我买来在 Android 上测试，但我无法开机。 我曾经开机一次，但我不得不取下后盖，基本上用刀子戳它，直到它开始工作。 我还没有把它扔进火山里。
也许我应该买一台评价更好的新 Android 设备来测试。 或者一台默认安装了 Opera 的设备。 唉，现在没有时间做这些事。
也许 BrowerStack 可以模拟它？ 喔，它可以，不错。
Bingo。
现在至少我可以复制这个问题。 这样，如果我想改变一些东西，就可以测试结果。 不过不幸的是，这个模拟器中没有内置任何 DevTools，所以它不能帮助我自行解决问题。
也许有一个模拟器我可以自己运行？ 喔，有！ 干得好，Opera。
在我等待下载的同时，我会搜索一下。 嗯，Zeldman 先生的一篇帖子，它 **非常** 类似。 他的解决方案是使用第三方服务（例如 Typekit），主要是因为他们在这方面很专业。 或者使用信赖的工具，比如 Font Squirrel 生成器，以确保最佳质量的文件和语法。
不幸的是，我已经在使用第三方服务 (Cloud Typography)，所以我不能在那里进行太多控制。 我会继续自己解决这个问题，但我会给他们发一封电子邮件，描述一下这个问题。 最重要的是让他们知道，其次，他们可能会有一个我可以尝试的解决方案。
{写完邮件并发送。}
好了，模拟器下载完成了。
它可以运行。 酷。 下载网站看起来像是你可以使用 Opera Dragonfly 从这里进行调试，但在 阅读相关文档 后，似乎你只能对本地网站进行调试，并且设置起来有点奇怪。 此外，现在我发现，在我拥有的 Opera 版本中，它基本上已经是 Chrome DevTools 了，而不是 Dragonfly。 所以，我需要找到一些旧版本的 Opera 下载才能这样做？ 哎呀，我觉得这个兔子洞越来越深了。
也许我应该看看另一个也使用与 CSS-Tricks 相同第三方服务的网站。 我们在 CodePen 上也使用 Cloud Typography 来提供字体，但字体完全不同，所以这应该是一个有趣的测试。
啊哈！ 方式相同，都很奇怪。
这是目前最强的线索。 这可能就是 Cloud Typography 的工作方式。 不幸的是，我对它的控制力有限，因为他们会向你提供文件，而且这些文件有意地被混淆了。
但我可以控制是否完全提供样式表。 我知道我不准备完全放弃自定义字体，因为我喜欢它们，而且它们通常运行良好，但我可能可以设法只在 Opera Mobile 上放弃它们。
尝试用户代理检测总是有点诱惑。 Opera 提供了相关文档，说明了他们在那里做了些什么，我总是可以进行测试。 但我犹豫了。 这不仅在 理论上不好，而且每次我这样做都会后悔，因为它要么没有捕捉到我想要捕捉的内容，要么捕捉了太多内容，或者两者兼而有之。 此外，我没有找到任何专门针对这种情况的漂亮 PHP 代码片段，而且我更擅长芭蕾舞而不是编写正则表达式。 我想再次走这条路吗？ 不想。
我也可以在这里查看一下分析数据，以了解问题的范围。 这是这里排名前 10 的浏览器
“Opera Mobile” 没有出现在列表中，即使查看了所有 189 个浏览器也是如此。 它必须要么与 “Opera” (1% 的一部分) 或 “Opera Mini” (0.1% 的一部分) 归类在一起。 移动版网站在这个网站上的总比例大约为 3%，其中包括 iOS 和 Android，这两个平台要受欢迎得多。 所以，我认为这可能影响了大约 0.25% 的用户。
我真的很想解决这个问题，但由于影响的用户数量非常少，缺乏良好的测试工具，我无法控制的部分，以及一些修复的潜在风险，我感到无能为力。 我想我会静观其变，看看提供商怎么说。
这只是一个关于成为前端开发者的故事。 它与字体无关，更多的是关于奋斗、过程和选择。
我也有类似的故障排除过程，但在早期的时候，我会停下来吃些饼干或其他零食，也许还会喝一罐红牛。
示例
完全跑题了，不过，告诉我，你怎么能喝无糖红牛？ ;)
Chris,
我喝各种红牛（包括“零糖”和限时口味）。 我觉得我现在更喜欢无糖的。 原味太甜了。
另一个导致奇怪结果的组合（一般来说，不一定在这里）是 Windows 上的 Safari！
听起来像是我的任何与 IE 相关的问题解决过程
bazar6，实际上你“无法”解决 IE 的问题。 按照定义，Internet Explorer 本身就是一个问题。 :D 嗯，我们也可以说它是一个浏览器失败的产物。
用户代理检测将是最快的解决方案，直到 Opera 或 Cloud Typography 修复这个问题。
这里有一个使用 JavaScript 的快速方法，我认为它应该可以工作
if(navigator.userAgent.match(/Opera Mobi/)) { $('html').addClass('opera-mobile'); }然后使用 .opera-mobile 为此浏览器提供不同的字体。 我认为 “Opera Mobi” 不会捕捉太多或太少。 当问题解决后，您只需删除那一行 JavaScript 和几行 CSS，就完成了。
我会使用 PHP
这样，您将获得额外的好处； 如果用户是 Opera Mobile，不要浪费时间加载他们无法使用的资源，反之亦然，对于其他大多数人来说，他们不需要 Opera 样式表。
是的！
谢谢，Chris！ 您不仅描述了我的工作头痛的一半（另一半涉及 SVN 和办公室向 scrum 的过渡）。 我还可以将那个模拟器用于我最近遇到的一个难以捉摸的 Opera 移动版错误，太棒了。
给在营销环境中做前端的任何人的小贴士： 如果你告诉他们除了堪萨斯州的一个家伙以外，几乎没有人看到这个 bug，营销人员就会听进去。 他们知道数字。 但是，自由职业的客户……也许可以过滤掉使用蹩脚浏览器或垃圾设备的客户？ 哈哈哈
读起来像一本关于极客的小说，我的朋友，触动了我们奋斗的所有心弦，以及我们努力达成的道德标准。 让我想起，在不久的过去，开发人员会拒绝为市场份额的 50% 提供支持，因为支持不止一种浏览器太耗时了。 现在，我们为那 0.25%、第 190 个浏览器而烦恼和劳碌，它像幽灵一样困扰着我们，我们试图取悦它却失败了。 哦！ 真是太痛苦了！
这就是你为（伪）DRM 付出的代价 :(
出于好奇，我上周在 iOS 上测试了一些 Opera Mini 网站。简单的网站似乎没有太大问题，但当我测试我们开发的复杂网站时，它们都出现了问题（主要是 CSS 和 jQuery），正如你所指出的，使用这个浏览器的用户数量非常少，因此我们不会投入任何时间来修复这些网站以适应这个浏览器。
由于页面是在 Opera 代理上渲染的，因此客户端也没有 JavaScript 引擎。这意味着，有一些启发式方法可以告诉 Omini 什么时候拉取更新版本（或者它是否应该这样做）。
2.41 亿人可不是个小数字。Opera Mini 对像这样的网站的使用率可能很低，但从全球范围来看，它非常庞大。
http://www.operasoftware.com/smw/2013-11
好吧，这就是 Android 4.2.1 上的 Dolphin 浏览器发生的情况：http://m.imgur.com/JnTcFFi
我也尝试了使用默认浏览器，文本没有溢出，但字体以同样的奇怪方式呈现。
如果我理解正确的话，云排版是付费的……因此，如果你必须付费，恕我直言，你应该为一项有效的服务付费。;-)
我根本不会担心“Opera Mobile/Classic”。它是基于已停产的 Presto 引擎（顺便说一句，史上最好的引擎 <3），9 个月前被“Opera 浏览器”（基于 Chromium）自动替换。它仍然可用，因为有一些声音强烈要求它回归。
我在我的 N7 上几乎完全使用 Opera Mobile。自从切换到 Blink /Chromium 之后，我这里再也没有遇到过问题。之前我一直在遇到你提到的问题。在我的 Linux 桌面版上仍然存在，因为较新的版本还没有在 Linux 上运行（而且我可能也不会切换，因为功能大大减少了）。
我工作日的 40% 是写各种 CSS，40% 是搜索 Google，主要是 Stack Overflow 文章，20% 是其他工作。
Stack Overflow 和 Google 加一！Chris……如果我们能够像 Stack Overflow 那样增加点赞回复的计数，那就太好了……就像谁一样？Stack Overflow！:o)
现在是不是应该提一下，我用 Android 4.1 的默认浏览器（标为“浏览器”，与 CyanogenMod 和类似的自定义 ROM 一起发布）时，也会出现这种情况？我的意思是，不是交叉框，但有时标题字体看起来很奇怪，好像有些字体渲染正常，但有些字体渲染成了备用字体。我会尽快截图。
我现在看到编辑按钮，所以这是：http://imgur.com/XEYLPAY&hfp2OkQ 它是两张图片，所以点击 Next/Prev（我不记得哪个）按钮就可以看到另一张图片。
我曾经遇到过类似的问题，然后发现了这个：http://dev.opera.com/articles/view/opera-mini-web-content-authoring-guidelines/#typography
这似乎有点奇怪：“在字体系列方面，Opera Mini 每个页面只会使用一个字体系列，设置 font-family 将不会产生任何效果，除非是等宽字体，它会模拟等宽字体。”
SO 上的一个答案还建议它与元标记“screen”和“handheld”有关。
http://stackoverflow.com/questions/5593828/opera-mini-and-css
不确定这对你有帮助，但这是一个有趣的问题。如果你解决了这个问题，请告知我们？
这听起来可能有点粗鲁，但这是我的流程
查看分析
对所有浏览器 < 1% 说“去你的”。
我认为有时这是合理的。我们在 IE 6 占有率不到 1% 的时候就已经开始这么做了。虽然需要考虑的是：1% 并呈上升趋势，还是 1% 并呈下降趋势？在这种情况下，由于切换到 Blink，它可能正在下降。
要打开 Nexus 7，只需按住电源按钮一分钟，不知何故，Nexus 7 和开机这两件事不太和谐 xD
我的第一代 Nexus 7 要么需要按住电源按钮大约一分钟，要么需要大约 10 秒。无论哪种方式，我总体上还是喜欢它。
我现在用 Android 查看，在标题中看到同样的“奇怪”字体。尤其是粗体字体。没有方框，但绝对是不同的字体。
顺便说一句，Chris，作为一名前端开发者，你没有 Android 设备用于测试，这真是太奇怪了。:P 我认为这很重要，因为幸运的是，它现在是大多数设备上的标配，讨厌的 iOS 幸运地被局限在 Apple 的“东西”上了。:)
但是，如果你仍然考虑扔掉 Nexus，我很乐意支付运费把它送到我家。:D 哈哈，开个玩笑。 ;)
使用 Opera Mobile 和 Dragonfly，你可以调试外部网站！本地 IP 地址只是 Opera 用于连接到模拟器。你甚至可以在一台机器上运行 Opera Dragonfly，并在另一台机器上调试在模拟器中运行的网站。网站与之无关。不幸的是，目前你无法在最新的基于 Blink 的 Opera 桌面版和移动版上执行此操作。
我曾经在一部旧的功能手机上使用 Opera Mini，因为它比默认浏览器有了巨大的改进。我无法相信它仍然可以在 Android 上使用，而且被宣传为“最快的浏览器”，而它所做的一切就是剥夺了对 web 字体等功能的支持。
我担心在黑莓的 WebKit 浏览器上也遇到了同样的问题。我不知道如何截取黑莓屏幕。它是 Bold，有实体键盘。
该网站的另一个问题是，浏览器在尝试第一次键入评论时会崩溃——第一次崩溃后正常（似乎与内存有关）。
这不仅听起来耳熟，而且似乎是我开发过程中的日常工作。
不过，你忘记提的是，当你真的找到一个可行的解决方案，实施它，并且感到自豪到足以抚摸你那极客般的胡子几分钟（直到下一个你从未想到过的奇怪问题出现）的那一刻的解脱感。
考虑访问您附近的 Open Device Lab 以在真实设备上测试和重现此行为？这可能有助于获得见解，并能够调试和追踪问题……
另一方面，你是否尝试过获取字体源并对其进行分析？它们是否提供 SVG 字体？如果是，这是一种很好的跟踪问题的方法。
所以你的解决方案是，双手乱舞，在下载了一些模拟器以查看是否也能看到问题的同时，花半个小时左右的时间搜索 Google 来了解这个问题？然后在你确认这是一个云服务的 bug（以及世界上只有 3 个 Opera 用户）之后，你就发送了一封电子邮件，内容是“帮帮我/修复它！”？我的儿子，这真是一个艰巨的任务。如果这算工作，你就能得到报酬去做，这真的是我的梦想工作。
你的方法呢？
Scott，他/她的方法可能是，即使他/她自己编造了 web 字体，也会简单地回复“这不是我的错，ROTFLOL，你这个愚蠢的用户”。
另一方面，Chris 以一种恰当的方式隔离了问题，并得出了一个合理的结论，即这是云排版的错误，因为是他们制作了这些奇怪的 web 字体。但你知道，在博客上进行人身攻击（不提供姓名或网站 URL）比做实际工作容易得多。
隐藏内容，因为它是一条匿名评论，因此是人身攻击。评论本身没问题。如果您愿意，可以重新发布，并提供您的真实姓名和电子邮件地址。
为什么你一定要使用 Cloud Typography？我假设它们是付费字体，并且许可证只允许它们使用。如果你可以控制 @fontface CSS 文件，尝试使用类似 这个 的方法。过去我曾用这种方法修复过 Chrome 渲染问题。
也许告诉某些浏览器优先使用特定格式可以解决问题。我在你的网站上使用 Android 浏览器（不确定哪个，但感觉像是 Chrome 或 Android 默认浏览器）看到了这个问题。
如果这不能解决问题，我会使用 FontSquirrel 生成相同的字体（如果许可证允许）、类似的字体（你可以使用 这个 找到类似的免费使用选项），或者你也可以针对 Android 进行单独处理，并将字体替换为 Roboto、Roboto-condensed 和 Open/Noto Sans 的变体。这些字体包含在 Android 4 及更高版本中。
我没有被锁定，我选择使用它们是因为我喜欢它们，而且这是这些字体唯一可用的方式。
你说得对，Zeldman 在上面给出的解决方案是，自己控制字体文件，通过 FontSquirrel 生成器运行它们，然后使用生成的代码。
Chris，字体现在在 Android 上完美运行。太棒了！:)
我认为从这一切中可以得到一个好的代码片段（?），可以作为标准（??）使用。至少根据我的微薄经验，Fontsquirrel 的方法是最好的。
不过要记住，（根据许可证）你必须提供一种保护字体文件的方法（即：不要让它们随便下载），因此该代码片段应该至少伴随一条 Apache 规则，该规则阻止直接访问字体文件，但允许它在你的网站中正常使用。
话虽如此，这就是为什么我更喜欢使用具有开放许可证的字体；)
我仍然抱有希望，所有浏览器最终会决定使用相同的渲染引擎。这样，网页才能真正走向未来。
我不知道为什么，但我发现 CodePen 在我的 Dolphin Beta（Android 4.0；HTC Wildfire）上运行不正常。
这可能看起来很奇怪：但我喜欢这种衬线-无衬线组合。
有趣的阅读，很好地展现了思考过程。
是的，不仅仅是 Opera。我在 Android 原生浏览器 4.2.1 上也看到了同样的问题。
我一直想告诉你，但一直忘记了。
看来，根据以上分析和评论，受影响的用户数量远远超出最初的估计。
你绝对是正确的。奇怪的是，Cloud Typography 的开发人员似乎没有在非苹果专有陷阱的东西上测试他们的东西。这有点奇怪！
喜欢读这篇文章。我以为除了我之外，每个人都会毫不费力地理解这类问题。知道我并不孤单真好。: )
此外，Android 虚拟机可能能够准确地重现这个问题和以后的问题。查看 Android-X86 或 AndroVM。这些软件都是免费的，可以在 Virtual Box（也是免费的）上运行，你可以更改分辨率来模拟平板电脑或手机。或者你可以安装 Google 的 Android SDK，不过它要慢得多，而且我认为麻烦得多。它也有一个模拟器。
很棒的文章
读完这样的“故事”后……一个如此熟悉的故事，我开始质疑我的人生中哪里出了问题……呜呼。去他的，我受不了了！再见，残酷的万维网……明天见
我在 Android 原生浏览器（4.3）上也遇到了同样的问题，但我通常使用 Chrome（看起来没问题），所以如果不是因为这篇文章，我不会注意到这个问题。
下次有人问我工作怎么样，我会把这篇文章发给他们。
但说真的，我会先查看分析数据，而不是作为最后的手段。
这与一般的 **问题解决** 没什么不同。从前端、后端一直到代数，我们不再解决浏览器问题，而是解决 X 的问题。
很棒的文章！
我记得 Jeffrey Zeldman 的一篇文章，他也遇到过同样的问题。
他的问题是字体传递的方式导致的：分成两部分。在某些情况下，浏览器只加载了字体的一部分，导致了你在这里遇到的相同问题。
如果我在 WebKit 检查器中查看，我会看到
font-family: 'Whitney Cond A', 'Whitney Cond B', ronnia-condensed, sans-serif;: 也许是同一个问题？回到能量饮料的谈话……在你讨厌我的推荐之前，先试一次：Monster Ultra。它装在白色罐子里，比所有其他能量饮料都要好。它很顺滑，不像 Monster 其他系列，那些饮料尝起来太像液体果冻糖；它是咖啡因的完美体现。仅供参考。
Lance，好吧，我想我们应该在这里讨论网页开发，而不是推广某个特定品牌的能量饮料。:P
有时，一个简单的设计可以带来奇迹 :) 过多的编码和拟物化设计会令人头疼。
还有，为什么你不也换成扁平化设计，全世界都在这样做呢？那样看起来会更酷！
“酷”与否，这取决于个人喜好。我个人属于那些认为仅仅因为有人（尤其是微软）在做某件事，并不意味着它就酷，恰恰相反。有些趋势很好，有些趋势只是徒劳的时尚，最终会消失。:)
嗨，CHris，
我遇到的问题只与服务器速度慢或自定义字体有关。我不喜欢这种奇怪的问题，它们很难解决。
因此，我喜欢简单的开发。
可悲的是，Chris，这损害了我对你形象的看法，让我难以接受。出于某种原因，我一直认为你不仅有答案，而且还是正确的答案！读完这个故事，得知你没有找到完美的解决方案，让我陷入了深深的绝望之中。
这正是我认为他的视频（他会在视频中大声思考）如此优秀的原因。我更感兴趣的是找到正确的思考过程，而不是实际的解决方案。
感谢这篇文章。我是我们工作场所中唯一的网页前端开发人员，所以阅读其他人如何解决问题对我来说很有帮助。
顺便说一下……由于工作场所的网站屏蔽，我能够访问这个网站，但它没有渲染样式表。也就是说，CSS-Tricks 没有使用任何 CSS！
我们公司现在正在研究与之完全相同的问题。好吧，几乎是一样的问题；只是在 Android Gingerbread 上出现 Whitney 缺少字形的现象，我们没有你遇到的那种“勒索信”问题。我已经成功排除了它是标记中的实际字符。Charles Proxy 及其集成十六进制编辑器参与了该实验。
目前的理论包括它是一个奇怪的连字，或者某种内容使用
:before魔法传递。我希望在本周内与 H&FJ 取得联系，以弄清此事。不过，时机很巧，在我发布此消息前一天，我就在自己组织内部收到了有关此问题的提醒。我会让你知道结果如何。我也遇到类似问题，但与中文汉字有关。是否有所有浏览器都能支持的中文字体？
正如 Eelco Deuling 在他的评论中所写，Cloud Typography 试图通过将字体分成两个文件来保护其网络字体。一些字母在版本 A 中传递，一些在版本 B 中传递。它们将两种字体配对为一个字体堆栈。
Opera Mini 只使用一种变体（Ben 的评论）。
只要 Cloud Typography 将字体文件拆分（DRM，höhöhö）或 Opera Mini 不接受每个字体家族超过一种样式，这个问题就无法解决。
顺便说一下：Opera 的桌面版（至少在 Ubuntu 12.04 上）也显示了基本文本的错误字体。加载后，它使用了粗体斜体（Whitney？），单击链接后返回，字体变为粗体并变小，但使用以前的间距。灾难性的。
我通常在桌面浏览器中查看网站，但我目前正在 Android 手机上使用 Feedly，字体也很奇怪。没什么大不了，但我很好奇 Feedly 使用什么来查看网站。
能够了解一位我尊重的开发者的思维方式真好。我只是以为其他所有开发人员都立即知道所有问题的答案。谢天谢地！
纯粹的质量！这就像我日常在移动端/前端开发中遇到的各种问题的日记。很棒 Chris……你让我的心情好多了。
很棒的文章，留白始终是良好的实践，文章中包含标题也很重要，感谢分享价值！
关于这一点，我再补充两句。我检查了资源面板，在字体下，即使对于 1-2 种字体来说，似乎也加载了大量的文件。Cloud.typography 将文件拆分，并根据页面首先需要的字符提供服务（尚未验证，但似乎是这种策略）。因此，如果网络连接断开了一些文件，你将得到奇怪的渲染效果。我真的不知道是否可以用任何 JS 测试来修复这个问题，该测试可以检测哪些字符已加载，哪些字符未加载。抱歉，但我对 JS 不擅长 :)
嘿 Chris，你是否考虑过使用远程调试器，例如Weinre？我突然觉得这可能非常有用（对我来说是日常的），并且在页面上快速搜索没有发现其他人提到它。这是一个很棒的移动测试工具。
这是网络字体不是好东西的众多原因之一。用户并不关心稍微漂亮一点的字体。他们关心的是可读性和速度。（这不是我编造的。有研究证明这一点。）
那个火山部分太棒了 xD
感谢您提到 Opera 模拟器，之前不知道他们有这个！
如果你不想费心解决这个问题，可以将问题报告给 CodePen，然后等待他们进行修复。;-)（这比可能正确的答案——联系 Cloud Typography 支持——要更俏皮一点。）
在我的网站上使用 Qt Webkit 查看时也遇到了这个问题，bluebook.io 使用的是 cloud.typography，我很想知道你是否解决了这个问题