Question

据我所知，CSS允许为不同的font-weight定义自定义字体。

例如，我在同一个@font-face下定义了3个不同的font-family，但font-weight属性不同：

@font-face {
    font-family: 'font-name';
    src: url('../fonts/font-light.woff') format('woff');
    font-weight: 300;
}
@font-face {
    font-family: 'font-name';
    src: url('../fonts/font-regular.woff') format('woff');
    font-weight: normal;
}
@font-face {
    font-family: 'font-name';
    src: url('../fonts/font-bold.woff') format('woff');
    font-weight: bold;
}

并根据我font-weight使用的内容，将加载相应的.woff：

//font-light.woff is used
p {
    font-family: 'font-name';
    font-weight: 300;
}

//font-regular.woff is used
p {
    font-family: 'font-name';
    font-weight: normal;
}

//font-bold.woff is used
p {
    font-family: 'font-name';
    font-weight: bold;
}

这很好，但我在如何为UPPERCASE文本定义自定义font-face上进行了叠加。目前，格鲁吉亚大写字母尚未包含在Unicode标准中，因此我必须为大写字体变体加载不同的字体文件。

我的想法是在元素样式中定义.woff时加载自定义text-transform: uppercase。

我在text-transform声明中使用了font-feature-settings和@font-face，但没有运气。

是否有可能以纯css的方式实现？

Answer 1

我会用

[1]

或

font-variant: small-caps;

或字体的SC版本（如果存在）。

Answer 2

我建议像往常一样包含所需的字体，只是选择与 text-transform: uppercase 结合使用。这样，它只会应用于大写字符。

这可以在以下内容中看到：

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Roboto');

.roboto {
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
}

＆＃13;

<div class="regular">Regular</div>
<div class="roboto">Roboto</div>

＆＃13;

为大写文本定义自定义font-face

2 个答案: