左引号和右引号在 Safari 中呈现为意外字符

Question

我有这样一段简单的文字：

<h1 class="intro-text" id="main-title">&lsquo;AN ABRAM&rsquo;</h1>

这应该呈现以下输出（这在 Google Chrome 中是正确的）：

但是当我在 Safari 中打开同一个文件时，输出如下所示：

为什么会发生这种情况，我如何确保这种情况不会发生？

Answer 1

您的文本在不同浏览器中呈现不同的原因可能有几个问题。

1. HTML charset 未设置为 utf-8

对于您的问题，这是一个非常常见的解决方案。有时，当 charset 未设置为 utf-8.

时，会出现意外的字符渲染

根据MDN Web Docs：

charset - This attribute declares the document's character encoding. If the attribute is present, its value must be an ASCII case-insensitive match for the string "utf-8", because UTF-8 is the only valid encoding for HTML5 documents. <meta> elements which declare a character encoding must be located entirely within the first 1024 bytes of the document.

简而言之，charset 属性定义了字符编码，以及每个字符将“呈现” 的内容。

要将其添加到您的 HTML，您需要像这样将其添加到您的 <head>。

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1 class="intro-text" id="main-title">&lsquo;AN ABRAM&rsquo;</h1>
  </body>
</html>

这应该说明 HTML 文档的编码应该是 UTF-8。这样，Safari 就不会以不同的方式打印字符。

注意：Safari 对文本的编码方式不同于 Google Chrome，存在一些已知问题，因此此解决方案很可能是最佳解决方案。

2。字体（OP 的工作解决方案）

另一个可能发生的问题是网页上选择的字体。

有时，字体可能是 Safari 无法正常呈现符号的原因。这可能有很多原因。

但是，要查看字体是否是问题所在，那么您应该删除 CSS.

中的所有 font-family 规范

* {
  font-family: "Some-Font"; /* Try and remove this */
}

HTML 文档中的默认字体（如果未指定）是 Times New Roman。如果更改字体后问题没有出现，则问题出在字体上。在这种情况下，您需要在 HTML 文档中找到另一种字体。

3。没有DOCTYPE

此列表中的第三期在您 HTML 的开头没有 <!DOCTYPE html>。

尽管此解决方案可能与您的问题无关，但值得一试。

如果您没有 DOCTYPE，您需要将其添加到下面指定的位置。

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Title!</h1>
  </body>
</html>

^{显示在第 1 行。}

这可能有助于解决问题。

综上所述，就是这三种解决方案。他们的排名从最有可能修复，从最不可能修复。

HTML charset 未设置为 utf-8
字体（OP 的工作解决方案）
没有DOCTYPE

这些应该可以解决您的问题。

左引号和右引号在 Safari 中呈现为意外字符

Left and right quotation mark render as unexpected character in Safari

html

text

utf-8

html-entities