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

Question

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

Answer 1

如果您使用 Sveltekit，则可以使用该static目录在本地加载字体。

将您的字体文件存储在 下static/fonts，然后使用 CSS 文件或<style>标签来引用您的字体文件。

/* fonts.css */

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/lora-v20-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''), url('/fonts/lora-v20-latin-500.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */ url('/fonts/lora-v20-latin-500.woff2') format('woff2'),
        /* Super Modern Browsers */ url('/fonts/lora-v20-latin-500.woff') format('woff'),
        /* Modern Browsers */ url('/fonts/lora-v20-latin-500.ttf') format('truetype'),
        /* Safari, Android, iOS */ url('/fonts/lora-v20-latin-500.svg#Lora') format('svg'); /* Legacy iOS */
}

最后，只需将 CSS 文件导入到您的__layout.svelte文件中：

<!-- __layout.svelte -->

<script lang="ts">
    import '/styles/fonts.css';
</script>

Answer 2

不确定您是否已经可以使用它，但请确保您的自定义字体放置在/public文件夹中的某个位置而不是/src.

因此，如果您将它们放入，/public/fonts您可以通过以下方式简单地访问它们global.css ：

@font-face{
  font-family: 'yourFont';
  src: url('/fonts/yourFont.woff') format('woff');
}

Answer 3

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

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

<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>

Answer 4

这对我有用：

<svelte:head>
    <style>
        @import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
    </style>
</svelte:head>

Answer 5

我是这样做的：我下载了字体，将其放在静态文件夹中。然后，在index.html中，我添加了这个样式标签：

        <style>
            @font-face {
                font-family: 'Open Sans';
                font-style: normal;
                font-weight: 400;
                src: url('%sveltekit.assets%/open-sans-v27-latin-regular.woff2') format('woff2');
            }
        </style>

在 +layout.svelte 中，我添加了以下内容：

<style global>
    body {
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
    }
</style>