顺风失败时设置默认字体？

Question

如果我将通用选择器与 tailwind 结合使用，并非所有元素都使用默认值。我希望一切都默认为 Impact（以防 tailwind 不 load/work）。为了对此进行测试，我删除了 @font-face 规则并刷新显示影响字体。它似乎适用于大多数元素，但不适用于下面的 div 元素。下面的div还是默认的宋体？这是因为我在 div 的 class 中设置了 font-NormsMedium 吗？ 那么，如果 tailwind 没有 load/work，我该如何正确更改我的默认字体？另外，我正在使用 svelte 框架。

更新：当我从 div class 中删除 font-NormsMedium 时，它默认为 impact，这正是我想要的，但是为什么当它没有从 div class?

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

如果 Tailwind 失败，“影响”将是默认设置。您添加到标记中的 Tailwind 类不会有任何效果。然而，您所描述的情况是不同的：您所看到的是字体加载失败的结果。

Tailwind 正在应用您的 font-family 规则，覆盖“影响”，但指定的字体不可用，因此它使用后备。字体堆栈允许您确定回退应该是什么。

如果您希望在您的主要字体未加载时一切都默认为“影响”，请将其添加到您的字体堆栈。

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

还值得正确设置 font-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'],
}

顺风失败时设置默认字体？

setting default font when tailwind fails?

css

fonts

css-selectors

tailwind-css

font-face