时间戳

首页 > 解决方案 > 如何在 Svelte 中加载和使用自定义字体

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

问题描述

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

标签： fontssvelte

解决方案

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>或者，您可以在头部内部包含带有 a 的字体。因为这种方法<svelte:head>很方便：

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

推荐阅读