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

Question

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

Answer 1

Svelte 不需要任何特殊的字体即可使用。

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

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

不确定您是否已经开始使用它，但请确保您的自定义字体位于 /public 文件夹中，而不是 /src 中。

因此，如果您将它们放在 /public/fonts 中，您只需在 global.css 中访问它们有：

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

Answer 3

我怀疑这与 https://github.com/sveltejs/sapper/issues/904 有关 - 当前解决方法：使用字体文件的相对路径。

Answer 4

这对我有用：

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

Answer 5

如果您使用的是 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>

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

How do you load and use a custom font in Svelte

fonts

svelte