html - 通过 CSS 为 h1 元素设置多种字体大小

Question

我需要显示一个公司名称，以便名称的“主要”部分出现在一行上并且很大，而名称的次要部分在它下方居中并且更小。由于它不是口号或“副标题”，我觉得它应该都在同一个h1元素中，理想情况下，通过纯 CSS 进行转换（意味着em如果可以避免，则没有 spans 或 s。

例子：

<h1>Big Bill's Custom Auto Parts</h1>

应显示为：

大比尔

是否有一种纯 CSS 方式来执行此操作（即使是尚未完全支持的伪类）？

score 6 · Accepted Answer

不可能，您有两个不同的标题并且可以相应地设置样式似乎更有意义。

如果<span>不在<h1>?

score 5 · Accepted Answer

是否允许在标题本身包含新行？如果是这样，您可以像这样使用第一行选择器：

HTML

<h1>Foo bar                                                                                            
baz</h1>

CSS

h1 {
  font-size:1em;
  white-space:pre;
}
h1:first-line {
  font-size:3em;
}

score 3 · Accepted Answer

不使用额外标题的最短解决方案是使用 span 元素：

<h1><span>Big Bill's</span> Custom Auto Parts</h1>

CSS：

h1.span {
  /* styling rules */
}

score 1 · Accepted Answer

如果您可以使用 a 来换行<br/>，那么您可以使用::first-line伪元素来完成此操作。

score 1 · Accepted Answer

你说你想用纯 CSS 的方式来做，分离内容和表现。没有额外spans的，没有br。我理解，但如果您考虑您的问题，您想创建基于 content 的演示规则。这有意义吗？这不是您想要避免的将内容与演示文稿混合吗？

score -1 · Accepted Answer

我在这个线程中尝试了其他东西，但这终于奏效了。

<h3>Tutorials <span style="font-size:14px;">(2 of them)</span></h3>