css 只有第一行字体大
Another typographic convention is to emphasize the first line or first few words of an opening paragraph, known as a run-in; typically the words are transformed into small-caps
with CSS. Returning to the scenario used in the earlier drop-cap example, the CSS would be:
另一种印刷惯例是强调开头段落的第一行或前几个词,即“ 磨合” ; 通常,这些单词会使用CSS转换为small-caps
。 返回到之前的下沉示例中使用的场景,CSS将是:
p:first-of-type:first-line {
font-variant: small-caps;
}
Not every typeface has a true small-caps variant; in that case, the browser will fake the equivalent. Other typefaces are nothing but small caps: Trajan Pro, for example. Alternatively, if you were using an OpenType font, you could employ true small caps.
并非每种字体都有真正的小写字母变体。 在这种情况下,浏览器将伪造等效内容。 其他字体不过是小写字母:例如Trajan Pro。 另外,如果您使用的是OpenType字体,则可以使用true small caps 。
Note that the effect of :first-line
is dynamic: as the number of words changes (due to rescaling content or altering the browser window size), only the text that remains in the paragraph's first line is affected by this rule.
请注意:first-line
的效果是动态的:随着单词数的变化(由于内容缩放或浏览器窗口大小的改变),只有保留在段落第一行中的文本才受此规则影响。
Affecting just the first few words is somewhat more complicated. There is, as of this writing, no pseudo-selector for :first-word, :second-word or :nth-word. The only solution for the time being would be to wrap a <span>
tag around the words you wish to affect, and write a CSS rule for the span in context. Our HTML code would be:
仅影响前几个单词会更加复杂。 截至撰写本文时,没有:first-word,:second-word或:nth-word的伪选择器。 目前唯一的解决方案是在要影响的单词周围包裹一个<span>
标记 ,并为上下文中的跨度编写CSS规则。 我们HTML代码为:
<p>P<span>hilip, after the defeat</span> of Onomarchus, had marched toward the pass of Thermopylae, which, however, he found occupied by the Athenians, who had sent a force for the purpose of preventing his advance. Being baffled there,he directed his march into Thrace, and alarmed the Athenians for the safety of their dominions in the Chersonese.
And the added CSS:
以及添加CSS:
p:first-of-type span {
font-variant: small-caps;
}
<span>
is a tag that is used when there are absolutely no other alternatives for markup. <span>
is an inline tag that is non-semantic: it provides no more information than "here is a set of content". For that reason, you should wrack your brain for any alternative elements to <span>
before using it.
<span>
是在绝对没有其他替代标记时使用的标记。 <span>
是一个非语义内联标签:它提供的信息仅比“这里是一组内容”更多。 因此,在使用<span>
之前,应先绞尽脑汁寻找除<span>
任何其他元素。
翻译自: https://thenewcode.com/226/Classic-Typography-Effects-in-CSS-first-line-run-in
css 只有第一行字体大