html - HTML/CSS 通过 CSS 定义选择的字符样式

Question

如何通过 CSS 定义选择的字符样式？

例如，我有这段代码，其中G应该有一个特殊的字体/大小，而uru应该是正常样式的。

<font style="font-family: BlessedDay; font-size: 180px;">G</font>uru

以上工作，但我假设不是好的做法。如何使用 CSS 类定义来做到这一点？

score 4 · Accepted Answer

类似，但使用跨度：

<span class="biggie">G</span>uru

CSS：

.biggie {
  font-family: BlessedDay;
  font-size: 180px;  
}

请注意，“BlessedDay”似乎不是免费提供的网络字体。

score 1 · Accepted Answer

您应该可以只使用伪选择器first-letter。注意：这不能用于内联元素，这就是我使用 ap而不是span.

HTML

<p class="guru">Guru</p>

CSS

.guru:first-letter {
    font-size: 200%;
    font-family: BlessedDay;
}

编辑：假设我因为没有使用课程而被否决。已修复以反映 OP 的要求：

如何使用 CSS 类定义来做到这一点？

score 0 · Accepted Answer

尝试这个，

<span class="c1">G</span>uru

<style>
 .c1 {
  font-family: BlessedDay;
  font-size: 180px;
 }
</style>

score 0 · Accepted Answer

答案略有不同，出于跨浏览器的原因，我建议使用 Diodeus 的答案，但如果您只对第一个字母进行操作，您也可以标记为：

<p class="big">Guru lorem ipsum</p>

CSS：

.big:first-letter { font-family: BlessedDay; font-size:180px; }

score -1 · Accepted Answer

你可以这样做：

HTML：

<body>
<div class="adoptabledogs">
<p>Max</p>
<p>Marbles</p>
<p>Mary</p>
<p>Moe</p>
</div>
</body>

CSS：

.adoptabledogs {
font-family: BlessedDay, sans-serif;
font-size: 45px;
color: green;
}

5 回答 5