Изменение шрифта в теме Jekyll - PullRequest
Новая
       23

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

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

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

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

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

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

Файл _variable.s css: 

// 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 для заголовков и lo go. Могу ли я изменить код на этот?: 

$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 на моем шаблоне, который я использую.

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

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

1 Ответ

0 голосов
/ 22 апреля 2020

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

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

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

<link href="https://fonts.googleapis.com/css2?family=Barlow&display=swap" rel="stylesheet">

если вы хотите вручную добавить свой шрифт с помощью sass / s css, там нет маги c, вам необходимо:

  • загрузить шрифты и поместить их в / fonts помните о наименовании, оно вам понадобится.
  • Проверьте, как это было сделано для " Source Sans Pro " в _sass / external / _source-sans-pro. s css. Добавьте новый файл, например BarlowSemiCondensed.scss, со всей необходимой информацией.
  • Создайте @font-face для шрифта, который вы будете использовать. (Обычно то, что вы получаете, когда загружаете шрифт , просто скопируйте эти файлы).
  • Не забудьте импортировать любой новый файл .s css в type-on-strap.s css
...