fonts - 如何在 Svelte 中加载和使用自定义字体

Question

我知道它可能使用 @font-face 但我不知道将我的 woff 文件放在哪里以让 Svelte 使用自定义字体。我也不知道把@font-face 放在哪里。提前致谢!

Answer 1

Svelte 不需要任何特殊的东西来使用字体。

您可以在样式表中或任何 @font-face 文件的 .svelte 标签内内联 <style>:

<h1>Hello World!</h1>

<style>
    @font-face {
        font-family: 'Gelasio';
        font-style: normal;
        font-weight: 400;
        src: local('Gelasio Regular'), local('Gelasio-Regular'), url(https://fonts.gstatic.com/s/gelasio/v1/cIf9MaFfvUQxTTqS9C6hYQ.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    h1 {
        font-family: Gelasio
    }
</style>

或者，您可以在头部内包含带有 <link> 的字体。对于这种方法 <svelte:head> 很方便:

<svelte:head>
  <link href="https://fonts.googleapis.com/css?family=Gelasio" rel="stylesheet">
</svelte:head>