当字体名称包含连字符时,为什么字体标签需要额外的引号?

Why does the font tag require extra quotes when the font name contains a hyphen?

我(有点不好意思)对 font 标签有疑问,以及它如何处理包含连字符的字体名称。

我的朋友在他的网站上有以下字体标签。但它没有以 "Handwriting - Dakota" 字体呈现文本。

<font face="Handwriting - Dakota">Hello, World</font>

添加另一层引号解决了问题。此处,face 属性(双引号)由单引号字符串组成。此文本 以 Dakota 字体呈现。

<font face="'Handwriting - Dakota'">Hello, World</font>

现在,显然正确的做法是用 span 替换 font 标签。但我很好奇为什么第一种形式不起作用。根据HTML 4.01规范,face attribute is a comma-separated list of font names; it doesn't say anything about hyphens. Nor does the spec for CDATA(人脸属性的数据类型)。

请注意,似乎是连字符而不是空格导致需要两层引号。 face="American Typewriter" 工作正常。

需要第二层引号的连字符有什么特别之处?这是不是由 HTML 解析规则引起的,该规则适用于 font 标签以外的事物(也就是说,一个 运行 可以在现代 HTML 中进入类似情况)?

更新:所以有很多 Dakota 的变体,它们的名称中并不都带有连字符。使用 Font Squirrel 上可用的字体 Lane 可以更可靠地重现该问题。 face="'Lane - Narrow'" 有效; face="Lane - Narrow" 没有。

face 属性没有特殊的解析规则。如果我们有 <font face="'Handwriting - Dakota'">,那么它会被解析为 'Handwriting - Dakota',并且 Ascii 撇号作为名称的一部分出现在开头和结尾。这样看来,在你的系统中,字体确实有这样的名字。

然而,字体名称是一个晦涩的话题,在这种情况下,“字体名称”的含义没有官方定义。在 CSS 上下文中,在 font-family 属性 值中,该值原则上是明确定义的(我们可以使用全名或 PostScript 名称),但浏览器可能不同。

如果您系统中的字体是您与 Mac OS 一起使用的字体,它的名称可能与字体供应商的名称不同。带有“-”的名称可能会导致浏览器出现问题。它们可以通过重命名字体来修复,但是当其他人查看您的页面时这无济于事。如果您发现使用 CSS 可以解决问题,那么我建议您忘记这个问题。

我免费找到了一个discussion that seems to mean that the vendor’s (vLetter, Inc) name for the font is Dakota and they distribute(虽然需要提供个人信息,我什至需要填写“-”作为状态)。我在 Win 7 中下载并安装了它,作为普通字体。它在 <font face=Dakota> 和 CSS 中都能正常工作(在 Chrome、IE、Firefox 上测试)。

使用从供应商网站下载的 Dakota 并将其用作 @font-face 的网络字体可能是最安全的。这样您将使用最新版本,几乎所有用户都会看到它(与在系统中安装了某个版本的 Dakota 的相当有限的一组用户相反)。

据我所知,浏览器正在使用 font 标记的 face 属性来填充 font-family CSS 属性。所以 face="'Handwriting - Dakota'" 变成 font-family: 'Handwriting - Dakota'。但是,face="Handwriting - Dakota"变成了font-family: Handwriting - Dakota,这是无效的CSS。

根据CSS spec

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means most punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

因此,<font face="American Typewriter"> 起作用了,因为字体名称是 CSS 标识符的有效序列。但是由于连字符不是有效的 CSS 标识符(source), the font name must be a quoted string. (Or the hyphen must be escaped; it turns out that <font face="Handwriting \- Dakota"> works, too.) Similarly, <font face="3dumb">doesn't work because CSS identifiers can't start with a number. (3dumb 是另一种 Font Squirrel 字体。)