将 Computer Modern Serif 添加到 Jekyll github 页面

Question

我正在使用分叉版本的 jekyll github page and want to add Computer Modern Serif font as the body font for all pages. I downloaded all the files from here as explained by the answer 到 fonts/Serif 文件夹中。然后我将以下代码添加到 _includes/ext-css.html 文件中

<head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <!-- Computer Modern Serif-->
    <link rel="stylesheet" href="fonts/Serif/cmun-serif.css"></link>
    ...
</head>

我还在 assets/css/beautifuljekyll.css 文件中添加了以下行（第 13 行）

body {
  font-family: 'Lora', 'Times New Roman', serif;

但是，我仍然无法在所有页面上使用这种字体。我还应该 add/remove 做其他事情吗？我是 github 页面和 html 的新手，所以请帮我解决这个问题

Answer 1

经过几次讨论（感谢 araxhiel）我找到了解决问题的方法。

在 _includes/ext-css.html 文件中添加 /fonts/ 而不仅仅是字体，即将代码设为

<head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <!-- Computer Modern Serif-->
    <link rel="stylesheet" href="/fonts/Serif/cmun-serif.css"></link>
    ...
</head>

在 assets/css/beautifuljekyll.css 文件的第 13 行将其更改为

body {
  font-family: 'Computer Modern Serif','Droid Sans', Helvetica, Arial, sans-serif;

而且，在同一个文件中，在第 13 行之前（正文开始之前）添加以下代码

//*********************** Fonts ********************//

@font-face {
    font-family: 'Computer Modern Serif';
    src: url('../../fonts/Serif/cmunrm.eot');
    src: url('../../fonts/Serif/cmunrm.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/Serif/cmunrm.woff') format('woff'),
         url('../../fonts/Serif/cmunrm.ttf') format('truetype'),
         url('../../fonts/Serif/cmunrm.svg#cmunrm') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Computer Modern Serif';
    src: url('../../fonts/Serif/cmunbx.eot');
    src: url('../../fonts/Serif/cmunbx.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/Serif/cmunbx.woff') format('woff'),
         url('../../fonts/Serif/cmunbx.ttf') format('truetype'),
         url('../../fonts/Serif/cmunbx.svg#cmunbx') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Computer Modern Serif';
    src: url('../../fonts/Serif/cmunti.eot');
    src: url('../../fonts/Serif/cmunti.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/Serif/cmunti.woff') format('woff'),
         url('../../fonts/Serif/cmunti.ttf') format('truetype'),
         url('../../fonts/Serif/cmunti.svg#cmunti') format('svg');
    font-weight: normal;
    font-style: italic;
}


@font-face {
    font-family: 'Computer Modern Serif';
    src: url('../../fonts/Serif/cmunbi.eot');
    src: url('../../fonts/Serif/cmunbi.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/Serif/cmunbi.woff') format('woff'),
         url('../../fonts/Serif/cmunbi.ttf') format('truetype'),
         url('../../fonts/Serif/cmunbi.svg#cmunbi') format('svg');
    font-weight: bold;
    font-style: italic;
}

除了上述两个代码添加之外，如果您按照问题中的步骤操作，只剩下将 fonts/Serif 文件夹添加到 link 的主仓库中，您就可以开始了!!

将 Computer Modern Serif 添加到 Jekyll github 页面

Adding Computer Modern Serif to Jekyll github page

html

css

webfonts

jekyll

github-pages