(软连字符)和 Chrome 和 Safari

Posted

技术标签:

【中文标题】(软连字符)和 Chrome 和 Safari【英文标题】:­ (soft hyphen) and Chrome and Safari 【发布时间】:2012-08-06 23:36:36 【问题描述】:

我有一个网站,我更喜欢使用 &shy ; (软连字符)按我想要的方式断词。

Click here for screenshot from Chrome

问题计算机运行 OS X(多个版本),并且问题出现在 Chrome 和 Safari(多个版本)中。具有完全相同操作系统和浏览器版本的计算机可以以不同的方式显示这一点。屏幕截图是在 OS 10.8 上使用 Chrome v. 21.0.1180.75 拍摄的。

它看起来像软连字符,因为它分隔单词,并插入一个连字符“-”,但它也会生成带有十字的矩形。

该网站使用@fontface,如果这与它有任何关系的话。

谢谢!

【问题讨论】:

您选择的字体系列中可能缺少该字符。 划掉的框表示渲染器在使用的字体中遇到了缺失的字符。尝试使用另一种(默认)字体来查看它应该在该位置呈现哪个字符。 标记详细包含什么?只是effekter/­animasjoner?或者您是否尝试这样输入软连字符?在任何情况下,这里都应该使用软连字符,因为这样的表达式,当分成两行时,不应该连字符而是简单地在“/”之后分开(例如<wbr>) .但是技术问题仍然存在,并且在使用软连字符的情况下是相关的。现代浏览器对它的支持通常非常好,所以可能会有一些特别的事情发生。 感谢您的回答。 @Jukka:是的,就是这样。我只是选了一个长词来测试。无论如何,我做了一些挖掘,据我所知,连字符的十六进制代码是 00AD(可以在 css 中定义)。我检查了开放式字体(我们从字体铸造厂获得了网络字体,但我猜他们是从 OTF 转换的)并且没有为连字符分配 HEX 代码。我检查了其他字体,它们将 00AD 正确分配给了连字符。这可能是问题所在吗?是否有可能以某种方式在 webfonts(eot、svg、svgz 和 woff)中进行验证? @nle,如果数据包含U+00AD而不是实体引用­,很有可能出现字符编码问题。所以我会先用­ 测试。我不太明白对 CSS 的引用——你的意思是在 CSS 生成的内容中添加软连字符,还是什么?无论如何,软连字符的字形是否存在应该无关紧要,但浏览器有其奇怪之处。为了进行分析,可能需要一个实际的 URL。 【参考方案1】:

我在soft hyphen bug in Webkit 上对此进行了详细调查。简而言之,问题似乎是 Helvetica Light(以及其他一些字体,如 Avenir)中的错误和 Webkit 中的字体堆栈错误的组合。您可以通过在字体堆栈中包含 Arial 来修复它,例如。

font-family:"Apercu Light", Arial, sans-serif;

【讨论】:

【参考方案2】:

特别是考虑到您的fonttest website,问题似乎是由两个因素引起的:OS X 上的一些 WebKit 浏览器存在一个错误,使它们在一行文本中使用字形呈现软连字符,而不是只是将其视为控制字符; StagSansWeb 字体要么没有字形(使浏览器使用虚拟字形),要么有一个奇怪的字形。如果这些浏览器另外将软连字符视为允许连字符,这将解释这些症状,前提是 Helvetica 的软连字符有一个空字形。

这是高度推测或推测性的。

在更坚实的基础上,标准中没有严格定义发生断字的文本呈现。如果浏览器在foo­bar 上应用连字符,它们应该在行尾呈现“foo”,后跟连字符,但标准没有说明是哪个连字符。它可以是 HYPHEN-MINUS(即 Ascii 连字符),或者 HYPHEN,甚至是 SOFT HYPHEN,如果它有一个字形的话。也许甚至是别的东西。它甚至可能取决于语言,因为某些语言有自己的连字符。

所以 WebKit 浏览器已经开始支持专有属性 -webkit-hyphenate-character 是可以理解的。但是,它似乎没有得到正确实施。在 Windows 7 上的 Chrome 和 Safari 上测试 -webkit-hyphenate-character: "\00AD",我注意到它们“连字符”单词(包含软连字符)而不添加 any 连字符(好像它们使用空字形),即使其他值属性工作正常。

总而言之,我希望您可以通过避免使用 StagSansWeb 之类的字体来处理可能会连字的文本来避免此问题。可以通过修改字体来解决问题。

【讨论】:

太好了,我真的很感激,Jukka! :) 我认为唯一真正奇怪的是它在完全相同的软件上呈现不同。我们不想更改字体,因为它是品牌字体。我会和字体代工厂讨论这件事,看看会发生什么。 一个小更新:我从 Foundry 获得了新的字体文件,他们解决了这个问题。再次感谢大家! :) 从 Chrome 版本 57 开始,当用于连字符 ASCII 字符时,Chrome 会呈现 HYPHEN-MINUS 字符的字形,即使使用的字体具有单独的 SOFT HYPHEN 字形【参考方案3】:

我在 webkit/mac 上遇到了同样的问题。创建字体的代工厂帮助了我并提供了有效的解决方案(添加 Arial)

font-family:"Apercu Light", Arial, Calibri, sans-serif; 

而不是

font-family:"Apercu Light", Calibri, sans-serif; 

在字体文件更新之前,这是一个临时解决方案。对于这种特殊情况,我认为 Arial 比 webkit/mac 上的 helvetica 有更好的支持。

【讨论】:

以上是关于(软连字符)和 Chrome 和 Safari的主要内容,如果未能解决你的问题,请参考以下文章

[软软软] Alpha-发布声明

EditText常用属性:为文本输入框指定软键盘类型和软键盘回车键图标设置

如何在 HTML / CSS 中隐藏软连字符 ()

第一次软工作业

有没有办法限制 Android 软键盘只允许表情符号字符?

在 Firefox 和 Internet Explorer 中解析 DateTime 字符串失败,适用于 Chrome