Изменение шрифта в теме Jekyll

В последние дни я немного экспериментировал с Jekyll. Я думаю, что я понимаю основы об этом. Я протестировал около 4 шаблонов и заставил их работать и понимать структуру страницы jekyll. Это не так уж и волшебно.

Сегодня я дошел до того, что захотел изменить шрифт своего шаблона. В настоящее время я использую Type on Strap Teamplate, и вы можете увидеть мой репозиторий. строить на страницах git прямо здесь.

Я проверил этот пост на stackoverflow. Это помогло мне идентифицировать файл _variables.scss в папке _sass/base. Также в ветке говорится, что всем файлом можно управлять через файл scss, который в основном называется темой. Итак, я нашел Type-on-Strap в папке _sass.

Теперь мой вопрос: нужно ли мне редактировать _variables.scss, как я сделал ниже, и если да, то куда мне поместить файлы ttf или как правильно связать с веб-шрифтом? Или я оставлю файлы _variables как есть и отредактирую только файл type-on-strap.scss? и если да, то что мне нужно изменить?

Файл _variable.scss:

// Typography
$font-family-main: 'Source Sans Pro', Helvetica, Arial, sans-serif;
$font-family-headings: 'Source Sans Pro', Helvetica, Arial, sans-serif;
$font-family-logo: 'Source Sans Pro', Helvetica, Arial, sans-serif;
$font-size: 1.25em;

Поэтому я больше не хочу использовать Sans Pro. Я хотел бы использовать Barlow Semi Condensed в качестве основного шрифта, а Barlow Semi Condensed Medium для заголовков и логотипа. Могу ли я изменить код на это?:

$font-family-main: 'Barlow Semi Condensed', sans-serif;
$font-family-headings: 'Barlow Semi Condensed', sans-serif;
$font-family-logo: 'Barlow Semi Condensed', sans-serif;

Резюме: я только хочу знать, что мне нужно отредактировать, как заставить шрифт Barlow заменить шрифт sans pro в моем шаблоне, который я использую.

Надеюсь, люди не слишком злятся на то, что я делаю еще один пост об этом. Я просматриваю некоторые ответы, и это второй день попыток. Как-то утомился :)

Заранее спасибо!


person leverage    schedule 29.01.2020    source источник


Ответы (1)


Эй, спасибо за использование темы. Я вижу два решения вашей проблемы

  1. Если вы не знакомы с sass, часто есть возможность напрямую импортировать css вашего шрифта в head.html. Попробуйте поискать "встроенную" версию.

Для этого шрифта вы можете просто добавить эту строку в свой заголовок и изменить _variable.scss, как вы сделали, чтобы он работал.

<link href="https://fonts.googleapis.com/css2?family=Barlow&display=swap" rel="stylesheet"> 
  1. если вы хотите вручную добавить свой шрифт с помощью sass/scss, нет никакой магии, вам нужно будет:

    • download the fonts and put them in /fonts mind the naming, you'll need it.
    • Посмотрите, как это было сделано для "Source Sans Pro" в _sass/external/_source-sans-pro.scss. Добавьте новый файл, например BarlowSemiCondensed.scss, со всей необходимой информацией.
    • Создайте @font-face для шрифта, который вы будете использовать. "nofollow noreferrer">скачайте шрифт, просто скопируйте эти файлы).
    • Не забудьте импортировать любой новый файл .scss в type-on-strap.scss
person Sylhare    schedule 22.04.2020