Как загрузить и использовать собственный шрифт в Svelte? - PullRequest
Новая
       6

Как загрузить и использовать собственный шрифт в Svelte?

1 голос
/ 06 января 2020

Я знаю, что он, вероятно, использует @ font-face, но я не знаю, где локально поместить мои woff-файлы, чтобы Svelte использовал собственный шрифт. Я тоже не знаю, куда поместить @ font-face. Заранее спасибо!

Ответы [ 3 ]

1 голос
/ 15 марта 2020

Не уверен, что он уже работает, но убедитесь, что ваши пользовательские шрифты размещены где-то в папке /public, а не в /src.

Так что, если вы поместите их в /public/fonts, вы можете просто получить к ним доступ в вашем global.css с помощью: 

@font-face{
  font-family: 'yourFont';
  src: url('/fonts/yourFont.woff') format('woff');
}
0 голосов
/ 06 апреля 2020

Я подозреваю, что это как-то связано с https://github.com/sveltejs/sapper/issues/904 - текущее решение: используйте относительный путь к файлам шрифтов.

0 голосов
/ 06 января 2020

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