将计算机现代衬线添加到 Jekyll github 页面答案

【问题标题】：Adding Computer Modern Serif to Jekyll github page将计算机现代衬线添加到 Jekyll github 页面
【发布时间】：2023-04-07 16:02:01
【问题描述】：

我正在使用 jekyll github page 的分叉版本，并希望将 Computer Modern Serif 字体添加为所有页面的正文字体。我按照answer 的说明从here 下载了所有文件到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;

但是，我仍然无法在所有页面上使用此字体。我应该添加/删除其他任何东西来完成这项工作吗？我是 github 页面和 html 的新手，所以请帮我解决这个问题

【问题讨论】：

标签： html css jekyll github-pages webfonts

【解决方案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 添加到主存储库中，您就可以开始了！！

【讨论】：