如何在Github Pages上更改网站的字体?

时间:2019-07-27 17:12:19

标签: html github fonts github-pages

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

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

请问有人可以建议我下一步如何更改我网站上的字体吗?

先谢谢您

亚当

1 个答案:

答案 0 :(得分:0)

您可以使用此代码创建单独的* .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;
}

要在整个网站上更改字体,请添加到asset / mobirise / css / mbr-additional.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 属性。

随意问其他问题:)希望这会对您有所帮助