时间戳

首页 > 解决方案 > 使用 Bulma 设置新的主要字体系列

css - 使用 Bulma 设置新的主要字体系列

问题描述

我正在尝试更新 Bulma 中主要字体系列的变量，但似乎没有发生任何事情。到目前为止，我所做的是：

  1. 导入初始变量和函数文件。
  2. 使用 Google Fonts 导入我想要的字体
  3. 设置一个名为的新变量$family-serif: "Grandstander", serif;
  4. 更新$family-primary以等于$family-serif;
  5. 导入布尔玛@import "../assets/bulma/bulma.sass";

源代码可以在：https ://github.com/jacobcollinsdev/eponym 找到，我已经包含了下面的代码片段：

@charset "utf-8";
@import url('../assets/bulma/sass/utilities/initial-variables.sass');
@import url('../assets/bulma/sass/utilities/functions.sass');

@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@500;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Grandstander&display=swap');

$family-serif: "Grandstander", serif;
$family-primary: $family-serif;

@import "../assets/bulma/bulma.sass";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/styles.css">

    <title>Home | Eponym Mag</title>
</head>

我最近才开始使用 Bulma，我认为我可能对需要包含的文件等有点混乱，任何见解都值得赞赏。

谢谢！

标签： cssbulma

解决方案

有点晚了，但是：在设置所有要自定义的变量后，您必须从 Bulma 导入所有您需要的东西（这在文档中提到过几次）。此外，还有使用node-sass、Sass CLI和webpack进行自定义的示例。

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@500;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Grandstander&display=swap');

$family-serif: "Grandstander", serif;
$family-primary: $family-serif;

@import "../assets/bulma/sass/utilities/initial-variables.sass";
@import "../assets/bulma/sass/utilities/functions.sass";

推荐阅读