Rve*_*urt 85 css fonts font-face
我必须导入Klavika字体,我收到了多种形状和大小:
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
现在我想知道是否有可能只用一个@font-face-query 将它们导入到CSS中,我weight在查询中定义了它.我想避免复制/粘贴查询8次.
所以类似于:
@font-face {
font-family: 'Klavika';
src: url(../fonts/Klavika-Regular.otf), weight:normal;
src: url(../fonts/Klavika-Bold.otf), weight:bold;
}
mai*_*man 205
实际上有一种特殊的@ 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任何您喜欢的元素,而无需指定font-family或覆盖font-weight和font-style.
body { font-family:"DroidSerif", Georgia, serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
strong em {
font-weight:bold;
font-style:italic;
}
有关此功能和标准用法的完整概述,请参阅本文.
Mir*_*ová 13
@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;
}
参考原来的问题：\n不，你绝对不能在单个@font-face规则中加载多个粗细或样式变体（例如斜体或压缩），除非你正在加载可变字体。
如果您的字体可用作可变字体，您实际上可以在单个规则中组合多个字体粗细，@font-face如下所示：
@font-face {\n font-family: \'Roboto Flex\';\n font-style: normal;\n font-weight: 100 1000;\n font-stretch: 0% 200%;\n src: url(https://fonts.gstatic.com/s/robotoflex/v9/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXpRJ6cXW4O8TNGoXjC79QRyaLshNDUf9-EmFw.woff2) format(\'woff2\');\n}\n我们需要通过添加 2 个值来指定字体粗细范围：
\nfont-weight: 100 1000;\n@font-face {\n font-family: \'Roboto Flex\';\n font-style: normal;\n font-weight: 100 1000;\n font-stretch: 0% 200%;\n src: url(https://fonts.gstatic.com/s/robotoflex/v9/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXpRJ6cXW4O8TNGoXjC79QRyaLshNDUf9-EmFw.woff2) format(\'woff2\');\n}\nfont-weight: 100 1000;\nslider_weight.addEventListener("input", function () {\n var axisValue = slider_weight.value;\n testarea.style.fontWeight = axisValue;\n value_weight.innerText = axisValue;\n});\n\nslider_width.addEventListener("input", function () {\n var axisValue2 = slider_width.value;\n testarea.style.fontStretch = axisValue2+\'%\';\n value_width.innerText = axisValue2;\n});我强烈推荐这篇文章，因为当前的谷歌字体用户界面并不是特别有用：
\n如何从谷歌字体获取可变字体链接？
请记住，@font-face不会自动将字体粗细应用于诸如等的强调<strong>元素<h1><h2><h3>。
因此，请确保为可预测的渲染指定所需的字体粗细如下所示：
\n/* Variable fonts: we can apply intermediate weight values - yay! */ \nstrong{\n font-weight: 623 \n}\n例如：“中等”和“半粗体”有什么区别？
\n...这取决于字体设计、字体的粗细范围以及实际上取决于您的设计决策。
\n某些字体默认情况下相当“粗体”，其他字体则相当“细”或“浅”（相关文章：某些 Google 字体没有 Semibold 字体类型）
/* Roboto 400 is too bold for me \xe2\x80\x93 map default/regular weight 400 to 300 */ \nbody{\n font-family: "Roboto Flex";\n font-weight: 300;\n}\n\n/* Roboto 700 is not bold enough for me \xe2\x80\x93 map default/bold weight 700 to 1000*/ \nstrong{\n font-weight: 1000\n}\n\n/* ... OK a medium weight might be handy \xe2\x80\x93 lets say 625 */ \n.medium{\n font-weight: 625\n}\n\n/* condensed or expanded styles: font-stretch < 100 = condensed; \nfont-stretch > 100 = expanded; */\n.condensed{\n font-stretch:0%;\n}\n.semi-condensed{\n font-stretch:50%;\n}\n\n.semi-expanded{\n font-stretch:200%;\n}\n\n.expanded{\n font-stretch:200%;\n}\n如果像我一样，您需要在不访问 Google 服务器的情况下加载 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;
}
如果需要，然后对斜体变体执行相同的操作。有关将名称映射到数字权重的线索，请参阅font-weight 文档。这是Roboto 字体下载链接。