如何將 Google 字體添加到 jekyll 主題
[英]How do I add a Google font to a jekyll theme
問題描述
我有一個使用最小主題的簡單 jekyll 網站： https://github.com/WesPeacock/simplesite以下是該網站的簡單index.md文件的樣子：
---
layout: home
---
# A Simple site for testing stuff
The next two lines should be in different fonts
* This bullet point is in the default minima font. The next point should be in Google Gentium Basic web font
* <span class="nkonya">Nɔ́pʋ Gugɛl Gyɛntiam Besɩk wɛbfɔnt wanlɩn ɩ́nɩ.</span>
This is on the Home Page.
我對 jekyll 和 css/sass/scss 的了解還不足以讓魔法發生，因此來自 Google API 的 Gentium Basic 字體將應用於我用 <span>...</span> 標記的代碼.
如果有比使用 <span class...> 標記更好的解決方案，那很好。
我發現的大多數答案都涉及替換基本字體。 我不想那樣做，只需添加一種字體並有一種相當簡單的方法來應用該字體。
1 個解決方案
解決方案1
1 已采納 2022-04-18 14:28:12
這很容易。 您需要覆蓋_includes中的head.html文件。 如果您還沒有這樣做，請從此處的 minima 主題存儲庫復制它https://github.com/jekyll/minima/blob/master/_includes/head.html並在<head>和</head之間添加以下行:
<!-- fonts -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Arvo">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">
使用您當然選擇的 fonts 更換 Arvo 和 Raleway。
然后你需要覆蓋 CSS。你可以創建一個css/override.css文件並將你的 fonts 添加到樣式中，例如以下將默認使用 Raleway，Arvo 用於所有標題和所有元素 class.site-title and.site-nav. 要在特定元素中使用 fonts，您需要了解一些有關 CSS 的知識，但沒有什么是您無法通過 google 輕松找到的。
body {
font-family: 'Raleway', serif;
}
h1, h2, h3, h4, h5, .site-title, .site-nav {
font-family: 'Arvo', sans-serif;
}
然后你將這個 CSS.Go 加載回你的head.html文件，並將此行包含在<head>標簽內，在你在那里找到引用的任何其他 CSS 樣式之后（文件加載的順序很重要）
<link rel="stylesheet" href="{{ site.baseurl }}/css/override.css" />
如何更改 header 字體大小並刪除 Jekyll minima 主題中的頁腳？
[英]How to change the header font size and remove the footer in Jekyll minima theme?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.