如何在 Github 页面上更改我网站的字体？

Question

我对网站设计和编程完全陌生。我在 Mobirise 上创建了一个网站，并将其存储在 Github 上。我希望更改整个网站的字体，因为我不再喜欢我在将其导出到 Github.

时在 Mobirise 上选择的字体

我已将需要使用的字体文件上传到存储库中的 /OpenSansFonts 文件夹：https://github.com/SkyBetChampionship/Sky-Bet-Championship/tree/gh-pages。

谁能告诉我下一步该怎么做才能更改我网站上的字体？

提前谢谢你，

亚当

Answer 1

您可以使用此代码创建单独的 *.css 文件，或将此代码添加到您的 assets/mobirise/css/mbr-additional.css（如果您创建单独的文件，不要忘记将此文件导入您的 home.html.

@font-face {
    font-family: 'OpenSans-Light';
    src: url('/OpenSansFonts/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-Light';
    src: url('/OpenSansFonts/OpenSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/OpenSansFonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/OpenSansFonts/OpenSans-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSans-Semibold';
    src: url('/OpenSansFonts/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-SemiBold';
    src: url('/OpenSansFonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/OpenSansFonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/OpenSansFonts/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/OpenSansFonts/OpenSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/OpenSansFonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

要在整个网站上更改字体，请添加到 assets/mobirise/css/mbr-additional 中的 body。css font-family 属性.

body {
  font-family: 'OpenSans';
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
}

要导入带有字体的单独 css 文件，请在您的 home.html 大约 42 字符串中添加此代码：

<link rel="stylesheet" href="your_path_to_file/file_with_fonts.css" type="text/css">

当你想要另一种字体风格时，使用font-family、font-weight和font-style 个属性。

欢迎提出其他问题 :) 希望这对您有所帮助

如何在 Github 页面上更改我网站的字体？

How do I change my website's font on Github Pages?

html

fonts