HTML 标签中的大写字母与 CSS 文本转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26367374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uppercase within HTML tag vs CSS text-transform
提问by Florin Pop
Is there a difference between directly writing uppercase text within HTML tag like this:
像这样在 HTML 标签中直接编写大写文本有区别吗：
<h3> MY TEXT HERE </h3>
or not having directly uppercase and transform it with CSS like this:
或者没有直接大写并使用 CSS 转换它，如下所示：
<h3> My text here </h3>
CSS:
CSS：
h3 { text-transform: uppercase;} ;
Which would load faster in the browser? And why?
哪个在浏览器中加载速度更快？为什么？
回答by Simon Paquet
It's not a question of which would load faster even though the upper case would "load faster" than loading the extra bytes from the css.
这不是哪个加载速度更快的问题，即使大写字母比从 css 加载额外字节“加载速度更快”。
In my opinion, there is a question of accessibility involved in that matter.
在我看来，这件事涉及可访问性问题。
You should write the text as it is supposed to be written for a vocal reader to read it (for blind people).
您应该按照应该为有声读者阅读而编写的文本（盲人）编写文本。
Morevover, I would personnaly write it with the text-transform as it's easy to change if you have a lot of h3 in your website and you don't want to write them all over again if you change the way your h3s look.
此外，我会亲自用文本转换来编写它，因为如果您的网站中有很多 h3，并且如果您更改 h3 的外观，您不想重新编写它们，那么它很容易更改。
回答by Jukka K. Korpela
There is a difference in document content, “MY TEXT HERE” versus “My text here” (just styled to be renderedin all uppercase). This matters in non-CSS rendering situations, in scripting, and other automated processing. Most search engines seem to dealt with texts in a case-insignificant manner, but this is not guaranteed and may change, at least in some situations. When text is copied and pasted from an HTML document, all styling is often lost so that you only get the content.
有一个在文档的不同内容，“我的TEXT HERE”与“我的文字在这里”（只是风格被呈现在所有大写）。这在非 CSS 渲染情况、脚本和其他自动化处理中很重要。大多数搜索引擎似乎以不区分大小写的方式处理文本，但这并不能保证并且可能会改变，至少在某些情况下是这样。从 HTML 文档复制和粘贴文本时，通常会丢失所有样式，因此您只能获得内容。
Any difference in speed on loading is most probably immaterial, but obviously the version that has the desired spelling in the content is faster than one that needs a style sheet rule to be loaded and applied.
加载速度的任何差异很可能是无关紧要的，但显然内容中具有所需拼写的版本比需要加载和应用样式表规则的版本快。
回答by LcSalazar
Logically speaking, writing it uppercase directly in the HTML source would save the browser the trouble of rendering the style rule and applying a transform to the text.
从逻辑上讲，直接在 HTML 源代码中将其写成大写可以省去浏览器呈现样式规则和对文本应用转换的麻烦。
But the difference of the page load speed would be irrelevant, and not noticed...
但是页面加载速度的差异是无关紧要的，不会被注意到......
回答by mfluehr
Be aware of the accessibility issues with all-caps. text-transform: uppercaseis better for accessibility than typing all-caps into your HTML markup. That said, according to WebAIM, all-caps can be an accessibility problem in general, whether used in your HTML or using CSS.
请注意全大写的可访问性问题。text-transform: uppercase与在 HTML 标记中输入全大写相比，可访问性更好。也就是说，根据 WebAIM，无论是在您的 HTML 中使用还是使用 CSS，全大写通常都可能是一个可访问性问题。
Here are some of the problems with all-caps:
以下是全大写的一些问题：
- "Lengthy segments of capitalized content are more difficult to read."
- "Screen readers generally do not read text differently if it is in all capital letters, so listeners will not know that the author is giving emphasis to the text."
- "In some cases, a screen reader may interpret ALL CAPITAL text as being an acronym and may read it as letters rather than words."
- “大写内容的冗长片段更难以阅读。”
- “如果文本全部为大写，屏幕阅读器通常不会以不同的方式阅读文本，因此听众不会知道作者在强调文本。”
- “在某些情况下，屏幕阅读器可能会将所有大写文本解释为首字母缩写词，并可能将其阅读为字母而不是单词。”
