logo标签列表

多种字重，一个@font-face查询

cssfontsfont-face
255

我需要导入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查询将这些内容导入到CSS中，其中我在查询中定义了weight。 我想避免复制/粘贴8次查询的情况。
所以类似这样：
@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight:normal;
  src: url(../fonts/Klavika-Bold.otf), weight:bold;
}
5
不只是一个字体，而是多种字体，所以不幸的是，我认为你只能忍耐它。 - Paulie_D
对不起，它是同一字体系列内的不同字体。 - Rvervuurt
多个Web字体文件 === 不同的字重 - Eric
2
这篇文章可能会有所帮助：http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/ 实际上，这里有一个SO答案：https://dev59.com/2mkw5IYBdhLWcg3wNn-h 它使用了那篇文章，作为你想要的东西不可能实现的替代方案。 - 97ldave
6个回答
547

实际上，@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 和 font-style 的情况下，向任何元素指定 font-weight:bold 或 font-style:italic。
body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

想要全面了解此功能以及标准用法，请查看本文。

示例画板

18
在我的情况下，只使用最低的@font-face。每次我引用font-family: 'DroidSerif'时，它将是font-weight: bold; font-style: italic;。 - Simon Arnold
2
你有证明这个方法确实有效的测试吗？你如何证明浏览器没有在不读取正确的字体文件的情况下伪造字体的重量或样式？ - rojobuffalo
1
如果你有一堆字体样式，比如说“book”、“black”或者“medium”，你可以将它们映射到数字的font-weight值（例如100、200、300），因为这些样式名称不是font-weight可用的值。 - evolross
3
@rojobuffalo提出了一个非常有力的观点。笔无法验证这一断言将按预期行事的有效性。具体来说，我从CSS示例中删除了粗体字体声明并再次运行它。外观完全相同。它是从缓存获取的吗？还是浏览器只是调整了普通字体的显示权重？ - user2895783
3
这种方法是正确的，可以在这篇 Mozilla 文章中找到详细说明：https://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/。你可以通过定义'bold'字体为斜体字来确定笔是否在工作。如果浏览器是伪造的，它会显示为粗体，但实际上是如预期的斜体。此方法还具有一个优点，即会正确地对备用字体进行样式设置，因为 'font-weight: bold'（或其他）与 'font-family' 声明一起使用。 - nabrown
显示剩余7条评论
14
@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;
}
3
与之前的解决方案相同，只是缩短了表示方式 :) - Mirka Nimsová
7
似乎没有起作用，我找不到相关资源，但它似乎有一定的真实性。 - dakab
14
100、200字重怎么样？ - Amir Fo
3
这个解决方案对我也没有用。 - Sam Kah Chiin
2
我喜欢这个语法，但是我在网上找不到任何参考资料。它在Chrome中对我无效，并被jigsaw.w3.org认为是无效的CSS。 - David Cook
1
如果这似乎有效，则是由于浏览器的合成。添加font-synthesis: none将显示它不起作用。 - Mark Fisher
8

更新于2022年：使用可变字体

如果你的字体以可变字体的形式提供，你可以在一个@font-face规则中组合多个字重（font-weight），例如：

@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并不特别有用：
如何从Google Fonts中获取可变字体链接？

请记住，@font-face 不会自动将字体权重应用于类似于<strong>或 <h1><h2><h3>等强调元素。

所以请确保您指定所需字体的权重以获得可预测的渲染效果，如下所示：

/* Variable fonts: we can apply intermediate weight values - yay! */  
strong{
   font-weight: 623 
}

不要依赖基于关键词的权重或样式（例如半粗体，中等，半压缩等）

例如：“中等”和“半粗体”之间有什么区别？取决于字体设计、字体权重范围，以及您的设计决策。
有些字体默认比较“粗”，而其他字体则比较“细”或“轻”（相关文章：一些 Google 字体没有 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%;
}
4
如果您需要加载Roboto字体而不访问Google服务器，那么应该这样做：
/* 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字体下载链接。

2
0

SCSS的解决方案：

@mixin fontPoppins($name, $weight, $style) {
  @font-face {
    font-family: poppins;
    src: url('/assets/poppins/#{$name}.ttf') format("truetype");
    font-weight: $weight;
    font-style: $style;
  }
}

@include fontPoppins('Poppins-Thin', 100, normal);
@include fontPoppins('Poppins-ThinItalic', 100, italic);
@include fontPoppins('Poppins-ExtraLight', 200, normal);
@include fontPoppins('Poppins-ExtraLightItalic', 200, italic);
@include fontPoppins('Poppins-Light', 300, normal);
@include fontPoppins('Poppins-LightItalic', 300, italic);
@include fontPoppins('Poppins-Regular', normal, normal);
@include fontPoppins('Poppins-Italic', normal, italic);
@include fontPoppins('Poppins-Medium', 500, normal);
@include fontPoppins('Poppins-MediumItalic', 500, italic);
@include fontPoppins('Poppins-SemiBoldItalic', 600, italic);
@include fontPoppins('Poppins-Bold', bold, normal);
@include fontPoppins('Poppins-BoldItalic', bold, italic);
@include fontPoppins('Poppins-ExtraBold', 800, normal);
@include fontPoppins('Poppins-ExtraBoldItalic', 800, italic);
@include fontPoppins('Poppins-Black', 900, normal);
@include fontPoppins('Poppins-BlackItalic', 900, italic);

在 Angular 中，字体文件被期望存放在 assets 文件夹中，而不是某个静态文件夹。

目前我在 assets 文件夹中有 18 个从 Google Fonts 下载的文件。

Poppins-Black.ttf
Poppins-BlackItalic.ttf
Poppins-Bold.ttf
Poppins-BoldItalic.ttf
Poppins-ExtraBold.ttf
Poppins-ExtraBoldItalic.ttf
Poppins-ExtraLight.ttf
Poppins-ExtraLightItalic.ttf
Poppins-Italic.ttf
Poppins-Light.ttf
Poppins-LightItalic.ttf
Poppins-Medium.ttf
Poppins-MediumItalic.ttf
Poppins-Regular.ttf
Poppins-SemiBold.ttf
Poppins-SemiBoldItalic.ttf
Poppins-Thin.ttf
Poppins-ThinItalic.ttf

接下来是什么？

或将其添加到全局CSS文件中

@tailwind base;
@tailwind components;
@tailwind utilities;

body { margin: 0; }

html, body {
  height: 100%;
  font-family: poppins, sans-serif /* sans-serif is fallback */;
}

或者在HTML中使用

在HTML中的某处使用style属性：

<p style='font-family: poppins, sans-serif; 
          font-weight: bold; 
          font-style: italic' >Some text</p>

在互联网问题的情况下，"sans-serif"是备用字体。
或者在Tailwind中使用它。
<p style='font-family: poppins, sans-serif' 
   class='font-bold italic'>Some text</p>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接