HTML标记与CSS文本转换中的大写

Question

在HTML标记中直接编写大写文本是否有区别，如下所示：

<h3> MY TEXT HERE </h3>

或没有直接大写并使用CSS转换它：

<h3> My text here </h3>

CSS：

h3 { text-transform: uppercase;} ;

哪个会在浏览器中加载更快？为什么？

Answer 1

这不是一个问题，哪个会加载更快，即使大写将加载更快＆＃34;而不是从css加载额外的字节。

在我看来，这个问题涉及无障碍问题。

你应该把文字写成应该为声乐读者写的文字（对盲人来说）。

此外，如果你的网站上有很多h3并且你不想再写一遍，那么我会用文字转换来编写它，因为它很容易改变。改变你的h3的样子。

Answer 2

文档内容，“我的文字在这里”与“我的文字在这里”（只是被称为呈现全部大写）存在差异。这在非CSS渲染情况，脚本编写和其他自动处理中很重要。大多数搜索引擎似乎都以案例无关紧要的方式处理文本，但这并不能保证并且可能会发生变化，至少在某些情况下是这样。从HTML文档复制和粘贴文本时，所有样式通常都会丢失，因此您只能获取内容。

加载速度的任何差异都可能是无关紧要的，但很明显，内容中具有所需拼写的版本比需要加载和应用样式表规则的版本更快。

Answer 3

从逻辑上讲，直接在HTML源代码中将其大写，这将使浏览器无法呈现样式规则并对文本应用转换。

但是页面加载速度的差异是无关紧要的，而且没有注意到......

Answer 4

请注意所有大写字母的辅助功能问题。 text-transform: uppercase的可访问性比在HTML标记中输入全大写字母更好。也就是说，according to WebAIM，无论是在HTML中还是在CSS中，全大写通常都是可访问性问题。

以下是全大写字母的一些问题：

1. “大写内容的长段很难阅读。”
2. “屏幕阅读器通常使用大写字母阅读文本，因此听众不会知道作者在强调文本。”
3. “在某些情况下，屏幕阅读器可能会将所有大写文本解释为首字母缩写词，并且可能会将其读为字母而不是单词。”