设置默认字体时，当尾风失败时？

Question

如果我将通用选择器与Tailwind结合使用，那么并非所有元素都依靠默认值。我希望所有默认都会影响（如果尾风不加载/工作）。为了测试这一点，我删除了 @font-face规则和刷新显示影响字体。它似乎适用于大多数元素，但下面的DIV元素不起作用。下面的div仍然用于ARIAL默认值？这是因为我在DIV班级中设置了字体 - 核对中的媒体吗？ 那么，如果尾风不加载/工作>，我该如何正确更改默认字体？另外，我正在使用Svelte框架。

更新：当我从DIV类中删除Font-NormsMedium时，它默认会影响我想要的是，但是当未从DIV类中删除它时，为什么它默认为Arial呢？

index.html

<style lang="postcss">

   * {
       font-family: Impact, sans-serif; 
     } 

   @font-face {
        font-display: block;
        font-family: NormsMedium;
        src: url(path...)
        format('woff2'),
        url(path...)
        format('woff');
        font-weight: 400;
        font-style: normal;
     }

tailwind.config

  module.exports = {
    theme: {
      extend: {
        fontFamily: {
                NormsBold: 'NormsBold',
                NormsMedium: 'NormsMedium',
                NormsRegular: 'NormsRegular',
            },
         },
       }

元素不默认要影响

<div class="mt-1 mb-2 text-lg text-left font-NormsMedium line-clamp-2 ">90s Hair Now with Calista</div>

Answer 1

如果尾风失败，则“影响”将是默认值。您将添加到标记中的尾风课无效。但是您描述的情况是不同的：您看到的是字体未能加载的结果。

您的字体家庭规则是由尾风应用的，“撞击”，但没有指定的字体，因此使用后备。字体堆栈使您可以确定该后备应是什么。

如果您希望所有内容默认为“影响”，如果您的主字体未加载，请将其添加到字体堆栈中。

fontFamily: {
    NormsBold: ['NormsBold', 'Impact', 'sans-serif'],
    NormsMedium: ['NormsMedium', 'Impact', 'sans-serif'],
    NormsRegular: ['NormsRegular', 'Impact', 'sans-serif'],
}

还值得正确设置您的字体face规则，以便它们都是一个具有按预期的权重的字体自己的。

示例：

@font-face {
    font-display: swap;
    font-family: 'Norms';
    font-style: normal;
    font-weight: 500;
    src: url(path TO MEDIUM...)
        format('woff2'),
        url(path...)
        format('woff');
}

@font-face {
    font-display: swap;
    font-family: 'Norms';
    font-style: normal;
    font-weight: 700;
    src: url(path TO BOLD...)
        format('woff2'),
        url(path...)
        format('woff');
}

/** Add as many variations as required */

配置：

fontFamily: {
    Norms: ['Norms', 'Impact', 'sans-serif'],
}