左右引号在 Safari 中呈现为意外字符
[英]Left and right quotation mark render as unexpected character in Safari
问题描述
I have a simple piece of text like so:
我有一段像这样的简单文字：
<h1 class="intro-text" id="main-title">‘AN ABRAM’</h1>
This should render the following output (this is correct in Google Chrome):这应该呈现以下 output（这在 Google Chrome 中是正确的）：
But when I open the same file in Safari the output looks like this:但是当我在 Safari 中打开同一个文件时，output 看起来像这样：
Why is this happening and how do I make sure this doesn't happen?为什么会发生这种情况，我如何确保这种情况不会发生？
1 个解决方案
解决方案1
5 已采纳 2022-04-29 21:53:48
There may be a few issues of why your text is rendering differently in different browsers.您的文本在不同浏览器中呈现不同的原因可能有几个问题。
1. HTML charset not set to utf-8 1. HTML charset未设置为utf-8
This is a very common solution for your issue.对于您的问题，这是一个非常常见的解决方案。 Sometimes, the unexpected character rendering occurs when the charset isn't set to utf-8 .有时，当charset未设置为utf-8时，会出现意外的字符渲染。
According to MDN Web Docs :根据MDN Web 文档：
charset- This attribute declares the document's character encoding.charset-此属性声明文档的字符编码。 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.utf-8”的不区分大小写的 ASCII 匹配项，因为 UTF-8 是 HTML5 文档的唯一有效编码。<meta>elements which declare a character encoding must be located entirely within the first 1024 bytes of the document.<meta>元素必须完全位于文档的前 1024 个字节内。
In short, the charset attribute defines the character encoding, and what each character will "render" to.简而言之， charset属性定义了字符编码，以及每个字符将“渲染”成什么。
To add this in your HTML, you need to add it in your <head> , like so.要将其添加到您的 HTML 中，您需要将其添加到您的<head>中，就像这样。
<;DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <h1 class="intro-text" id="main-title">‘AN ABRAM’</h1> </body> </html>
This should state that the encoding of the HTML document should be UTF-8. This way, Safari shouldn't print out the characters in a different way.这应该是 state，HTML 文档的编码应该是 UTF-8。这样，Safari 不应该以不同的方式打印出字符。
Note: There are known issues of Safari encoding the text differently than Google Chrome, so this solution is most likely the best fix.注意：已知问题 Safari 对文本的编码方式与 Google Chrome 不同，因此此解决方案很可能是最佳解决方案。
2. Fonts (OP's working solution) 2. Fonts（OP的工作方案）
Another issue that could occur is the fonts that have been chosen to be on the webpage.另一个可能发生的问题是 fonts 已被选在网页上。
Sometimes, fonts can be the reason Safari doesn't render the symbols like normal.有时，fonts 可能是 Safari 无法正常呈现符号的原因。 This can be for many reasons.这可能有很多原因。
However, to see if fonts are the issue, then you should remove all of the font-family specifications in your CSS.但是，要查看 fonts 是否是问题所在，那么您应该删除 CSS 中的所有font-family规范。
* {
font-family: "Some-Font"; /* Try and remove this */
}
The default font in a HTML document (if it isn't specified) is Times New Roman. HTML 文档中的默认字体（如果未指定）是 Times New Roman。 If the issue doesn't occur after changing the font, then the issue was the font.如果更改字体后问题没有出现，则问题出在字体上。 In this case, you would need to find another font to be in your HTML document.在这种情况下，您需要在 HTML 文档中找到另一种字体。
3. No DOCTYPE 3.没有DOCTYPE
The third issue in this list is no <!DOCTYPE html> at the start of your HTML.此列表中的第三个问题是在您的 HTML 开头没有<!DOCTYPE html> 。
Even though this solution may not be related to your issue, this is a good thing to try.即使此解决方案可能与您的问题无关，也值得尝试。
If you don't have the DOCTYPE , you need to add it in the location specified below.如果您没有DOCTYPE ，则需要将其添加到下面指定的位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>Title!</h1>
</body>
</html>
Shown on Line 1 .显示在第 1 行。
This may help solve the issue.这可能有助于解决问题。
In conclusion, these are the three solutions.总结起来就是这三种解决方案。 They are ranked from most likely to fix, from least likely to fix.它们的排名从最有可能修复，从最不可能修复。
- HTML
charsetnot set toutf-8HTML charset未设置为utf-8 - Fonts (OP's working solution) Fonts（OP的工作解决方案）
- No
DOCTYPE没有DOCTYPE
These should fix your problem.这些应该可以解决您的问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.