如果字体不支持此选项，如何使用 CSS 对缩写的小型大写字母进行编码？

Question

我有一个以首字母缩写词命名的产品，该产品的名称在页面上重复了很多次。

在西班牙语中，排版样式规则建议使用小型大写首字母缩写词，但我的字体不提供小型大写选项。

在这种情况下，编写模拟小型股的最佳方法是什么？

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

h1,p{font-family: Nunito;}

h1{font-size: 2em;
font-weight: 600;}

p{font-size: 1em;}

<h1>Cual es el mejor <abbr>SOAP</abbr> para bañar a tu perro</h1>
<p>Bañar a tu perro con <abbr>SOAP</abbr> no debería ser difícil. Sin embargo, es posible que el <abbr>SOAP</abbr> que consigas huela a gato, con lo cual afectes seriamente la personalidad de tu mascota. Es necesario probar el <abbr>SOAP</abbr> que vas a usar sobre tu perro en una persona antes de aplicárselo, asegurándote de que el <abbr>SOAP</abbr> no atraiga otras alimañas. Sigue a la persona a la que engañaste al cambiarle el <abbr>SOAP</abbr> y anota su interacción con otras formas de vida<p>

Answer 1

如果字体具有足够的字体粗细选项，这在任何上下文中都是一个很好的解决方案。

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');

h1,p{font-family: Nunito;}

h1{font-size: 2em;
font-weight: 700;}

p{font-size: 1em;
font-weight:300}

abbr{
    font-size: 1.5ex;
    font-weight: bolder;
}

<h1>Cual es el mejor <abbr>SOAP</abbr> para bañar a tu perro</h1>
<p>Bañar a tu perro con <abbr>SOAP</abbr> no debería ser difícil. Sin embargo, es posible que el <abbr>SOAP</abbr> que consigas huela a gato, con lo cual afectes seriamente la personalidad de tu mascota. Es necesario probar el <abbr>SOAP</abbr> que vas a usar sobre tu perro en una persona antes de aplicárselo, asegurándote de que el <abbr>SOAP</abbr> no atraiga otras alimañas. Sigue a la persona a la que engañaste al cambiarle el <abbr>SOAP</abbr> y anota su interacción con otras formas de vida<p>

如果字体不支持此选项，如何使用 CSS 对缩写的小型大写字母进行编码？

How to encode small caps for abbreviations using CSS if the font doesn't support this option?

html

css

smallcaps