【问题标题】:Customize font size for all the slides in xaringan自定义 xaringan 中所有幻灯片的字体大小
【发布时间】:2018-12-03 08:37:33
【问题描述】:

我正在使用亿辉的awesome packagexaringan构建html幻灯片,对于熟悉xaringan或css的人来说,这可能是一个非常简单的问题:

我不知道如何设置所有幻灯片的字体大小。我尝试在自定义 css 中定义 font-size,例如 body{font-size: 200%}body{font-size: xx-large},并在 YAML 中调用它:

output: xaringan::moon_reader: css: [custom.css]

什么都没有改变。 我知道我可以使用.large 类来更改一定数量的单词的大小,并在幻灯片的开头使用class: large 来更改整个页面的正文字体。但是,有没有办法避免将class:large 粘贴到我构建的每张幻灯片上但同时设置字体大小?任何建议将不胜感激!

【问题讨论】:

    标签: css xaringan


    【解决方案1】:

    YAML 标头:

    ---
    title: "Presentation Ninja"
    subtitle: "⚔<br/>with xaringan"
    author: "Yihui Xie"
    date: "2016/12/12 (updated: `r Sys.Date()`)"
    output:
      xaringan::moon_reader:
        lib_dir: libs
        nature:
          highlightStyle: github
          highlightLines: true
          countIncrementalSlides: false
    ---
    

    尝试将以下行添加到您的 Rmd 文件或将其放入您的 custom.css:

    <style type="text/css">
    .remark-slide-content {
        font-size: 30px;
        padding: 1em 4em 1em 4em;
    }
    </style>
    

    解释:

    • 上面的代码覆盖了remark-slide-content的默认样式,以更改remark-slide-content类下幻灯片中的字体大小,这适用于幻灯片中的所有文本。

      李>
    • 在我的测试过程中,也应该相应地调整填充。自己试验一下。

    • 已编辑:当幻灯片不是独立的(即 CSS 文件单独保存)时,!important 规则不是必需的。

    • 再次编辑(参见下面的 cmets):

    要设置一个页面的字体大小,首先,在 CSS 部分定义一个类:

    .my-one-page-font {
      font-size: 40px;
    }
    

    然后在幻灯片标题前添加class: my-one-page-font

    【讨论】:

    • 感谢您的回复!但是,使用这个技巧有几个问题:(1) 当我在我的 css 中添加该行时,它不仅增加了 body 中的字体大小,而且还增加了 h1,2,3 中的字体大小。有没有办法避免这种情况? (2) 看起来,一旦我使用了这个技巧,我就用class: 松开了对单独幻灯片的字体的控制。抱歉很烦人,但在实践中,我确实想修改某些单张幻灯片的字体大小。删除!important 是否允许这样做?
    • 我明白了。所以你希望能够在全局范围内更改字体(用于内容)以及在本地更改一些部分,对吧?
    • 没错!理想情况下,我希望使用 .large{150%} 作为全局默认大小,同时在需要时使用其他大小。
    • 嗨,@sammo3182,我已经测试并编辑了上面的代码。请让我知道这对你有没有用。忘记我原始答案中的!important,我误用了它。
    • 非常感谢@TC Zhang 的跟进!在我尝试覆盖 page 的字体大小之前,这些代码运行良好。您的代码允许我全局设置默认字体大小并使用例如.large[the word] 更改某些单词或句子的大小。两者都很棒!另一方面,我是否有可能覆盖某个页面的字体大小?在xaringan 的默认模式下,我可以通过将class: small 放在幻灯片的部分标题之前来做到这一点。
    猜你喜欢
    • 2019-03-18
    • 2020-12-04
    • 2019-01-18
    • 2018-12-09
    • 2020-02-11
    • 2020-02-03
    • 1970-01-01
    • 2020-01-14
    • 1970-01-01
    相关资源
    最近更新 更多