我必须导入克拉维卡字体，我已经收到了多种形状和大小:
Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf
现在我想知道是否有可能将这些导入CSS，只需一个@font-face-query，在那里我在查询中定义权重。我希望避免将查询复制/粘贴8次。
比如:
@font-face {
font-family: 'Klavika';
src: url(../fonts/Klavika-Regular.otf), weight:normal;
src: url(../fonts/Klavika-Bold.otf), weight:bold;
}
实际上，有一种特殊的@font-face可以满足你的要求。
下面是一个例子，使用相同的字体族名称，但不同的样式和粗细与不同的字体相关:
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "DroidSerif";
src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
font-weight: bold;
font-style: italic;
}
您现在可以指定任何您喜欢的元素的font-weight:bold或font-style:italic，而不必指定字体族或重写字体-weight和字体-style。
body { font-family:"DroidSerif", Georgia, serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
strong em {
font-weight:bold;
font-style:italic;
}
要全面了解该特性及其标准用法，请参阅本文。
例子的钢笔
@font-face {
font-family: 'Klavika';
src: url(../fonts/Klavika-Regular.otf) format('truetype') font-weight-normal,
url(../fonts/Klavika-Bold.otf) format('truetype') font-weight-bold,
url(../fonts/Klavika-Bold-Italic.otf) format('truetype') font-italic font-weight-bold;
}
如果像我一样，你需要在不触及谷歌的服务器的情况下加载Roboto字体，它应该看起来像:
/* Thin */
@font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Thin.ttf) format('truetype');
font-style: normal;
font-weight: 100;
}
/* Light */
@font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Light.ttf) format('truetype');
font-style: normal;
font-weight: 300;
}
/* Normal */
@font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Regular.ttf) format('truetype');
font-style: normal;
font-weight: 400;
}
/* Medium */
@font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Medium.ttf) format('truetype');
font-style: normal;
font-weight: 500;
}
/* Bold */
@font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Bold.ttf) format('truetype');
font-style: normal;
font-weight: 700;
}
/* Black */
@font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Black.ttf) format('truetype');
font-style: normal;
font-weight: 900;
}
然后，如果需要，对斜体变体进行同样的操作。 有关将名称映射到数字权重的线索，请参阅字体权重文档。这是Roboto字体的下方链接。
更新2022:使用可变字体
如果你的字体是可变字体，你可以在一个@font-face规则中组合多个字体权重，如下所示:
@font-face {
font-family: 'Roboto Flex';
font-style: normal;
font-weight: 100 1000;
font-stretch: 0% 200%;
src: url(https://fonts.gstatic.com/s/robotoflex/v9/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXpRJ6cXW4O8TNGoXjC79QRyaLshNDUf9-EmFw.woff2) format('woff2');
}
我们需要通过添加2个值来指定字体重量范围:
font-weight: 100 1000;
slider_weight.addEventListener("input", function () { var axisValue = slider_weight.value; testarea.style.fontWeight = axisValue; value_weight.innerText = axisValue; }); slider_width.addEventListener("input", function () { var axisValue2 = slider_width.value; testarea.style.fontStretch = axisValue2+'%'; value_width.innerText = axisValue2; }); body{ font-family: 'Roboto Flex'; font-size:5vw } @font-face { font-family: 'Roboto Flex'; font-style: normal; font-weight: 100 1000; font-stretch: 0% 200%; src: url(https://fonts.gstatic.com/s/robotoflex/v9/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXpRJ6cXW4O8TNGoXjC79QRyaLshNDUf9-EmFw.woff2) format('woff2'); } #testarea { font-size: 2em; transition:0.5s; font-weight:100; font-stretch: 0%; } .regular{ font-weight:400 } .bold{ font-weight:900 } .condensed{ font-stretch:0%; } <h1 class="bold">Roboto Flex bold</h1> <h1 class="regular condensed">Roboto Flex regular condensed</h1> <label for="slider_weight">Weight</label> <input type="range" id="slider_weight" name="slider" value="100" min="100" max="1000" step="10"> <span id="value_weight">100</span> <br> <label for="slider_width">Width</label> <input type="range" id="slider_width" name="slider" value="0" min="0" max="200" step="1"> <span id="value_width">0</span> <p id="testarea" contenteditable="true">Type something ...</p>
检索谷歌变量字体…棘手的
我强烈推荐这篇文章，因为目前的谷歌字体UI并不是特别有用: 如何从谷歌字体获得可变字体链接?
请记住，@font-face不会自动将字体权重应用于强调的元素，如<strong>或<h1><h2><h3>等。
所以请确保，你为一个可预测的渲染指定了所需的字体权重:
/* Variable fonts: we can apply intermediate weight values - yay! */
strong{
font-weight: 623
}
不要依赖于基于关键字的权重或样式(例如半粗体、中号、半浓缩等)。
例如:“medium”和“semibold”的区别是什么? ．.． 这取决于字体设计，字体的粗细范围，实际上也取决于你的设计决定。 一些字体在默认情况下相当“粗体”，另一些字体则相当“薄”或“轻”(相关帖子:一些谷歌字体没有半粗体字体类型)
/* Roboto 400 is too bold for me – map default/regular weight 400 to 300 */
body{
font-family: "Roboto Flex";
font-weight: 300;
}
/* Roboto 700 is not bold enough for me – map default/bold weight 700 to 1000*/
strong{
font-weight: 1000
}
/* ... OK a medium weight might be handy – lets say 625 */
.medium{
font-weight: 625
}
/* condensed or expanded styles: font-stretch < 100 = condensed;
font-stretch > 100 = expanded; */
.condensed{
font-stretch:0%;
}
.semi-condensed{
font-stretch:50%;
}
.semi-expanded{
font-stretch:200%;
}
.expanded{
font-stretch:200%;
}
