无法在打印和屏幕之间获得一致的字体大小

如何解决无法在打印和屏幕之间获得一致的字体大小

我作品的标准演示格式是Google幻灯片，比例为16：9，宽度设置为10英寸。但是我讨厌不得不手动输入图等，因此最初使用Beamer来模仿它，但现在却尝试对所有现代html功能使用xaringan。

我的问题在于，在屏幕上显示演示文稿和打印演示文稿之间，我无法轻易获得字体大小的一致性。详细说明。假设我在Google幻灯片中有一些文字设计为12pt（16px）。当我在演示文稿模式下显示时测量文本的大小时，这与以pdf下载（然后置于演示文稿模式下-使用Sumatra）时相同文本的大小一致。好的，我知道这是一件很奇怪的事情，但是它强调了Google幻灯片必须做大量背景工作才能使这些内容一致的事实-而我无法与xaringan获得相同的事实是-也许-突出问题。也许-我认为实际上它可能更正确，因为我认为它正在调整显示器的尺寸/分辨率（14英寸，1920 x 1080）。

无论如何。如果我使用下面的示例代码在xaringan中执行相同的操作，则（前提是我添加了CSS @page代码以强制pdf打印为正确的物理尺寸），然后使用pdf结果与Google生成的pdf中的字体大小匹配。大！这里的所有内容都是一致的，我可以将xaringan幻灯片打印为与Google幻灯片相同的格式，例如与指向空白的客户共享，他们拒绝使用Google并只希望通过pdf发送电子邮件。我知道。

我的问题是，在全屏模式下查看xaringan html幻灯片时，字体大小仅为“正确” pdf大小的大约75％。这是一个问题，因为-好吧，我可以稍微调整字体大小，以便在屏幕上显示的效果等同于Google幻灯片-但是pdf中的字体太大了。因此，没有一种简单的方法可以使我可以使用相同的.Rmd文件进行在线展示和以pdf格式发送，并且所有字体大小都像我一直使用Google一样（除非我只展示pdf，但不妨还原为Beamer）。

我想所有这些的原因是在后台处理字体大小的某种方式，但这也许是一个错误吗？如果没有，是否有办法在屏幕和pdf之间强制这种一致的字体大小？

tl; dr Google幻灯片在屏幕上查看和pdf之间似乎具有一致的字体大小-但是xaringan似乎没有。

这是Rmd示例。您可以看到，生成的pdf（在演示文稿模式下查看时）的字体大小明显大于在演示文稿模式下的html文件。在Google幻灯片中，这些字体的大小都相同。为方便起见，我正在使用xaringanthemer。

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
institute: "RStudio,PBC"
date: "2016/12/12 (updated: `r Sys.Date()`)"
output:
  xaringan::moon_reader:
    nature:
      ratio: "16:9"
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
    seal: false
knit: pagedown::chrome_print
---

```{css,echo = FALSE}
@page {
  size: 10in 5.625in; # makes sure pdf comes out same size as Google Slides pdf
}
```

```{r setup,include=FALSE}
options(htmltools.dir.version = FALSE)
library(xaringanthemer)
style_mono_light(
  base_font_size = "16px",header_h1_font_size = "1.5rem"
)
```


# Hello World

Install the **xaringan** package from [Github](https://github.com/yihui/xaringan):

哦，我也在代码块中尝试了此CSS，但是尽管它确实可以修复html幻灯片的大小，但是在全屏模式下也会出现相同的问题：

.remark-container {
    height: 540px!important;
    width: 960px!important;
}

解决方法

好吧，所以对此有些a昧-尽管我仍然不完全满意，但我理解为什么xaringan会这样做。实际上，我实际上认为这与remark.js本身以及它处理全屏的方式有关，或者与浏览器的处理方式有关（问题似乎在我尝试过的所有方面都很明显），因为也是“正常”的remark.js演示文稿。

无论如何，如果您在屏幕上查看时使用@media规则来修改字体大小，这很简单。有多种方法可以执行此操作，这取决于您希望缩放的“自动化程度”。重要的一点是确保您仅以任何非相对单位设置基本html字体大小，并使用rem定义相对于该字体的其他所有内容-这样其他所有内容都可以适当缩放。否则，您将不得不手动更改其他所有内容，例如所有h1等。

前两种方法似乎是等效的，但是我对这一切都是陌生的，所以也许不是，直接重置html字体：

```{css,echo = FALSE}
@page {
  size: 10in 5.625in; # makes sure pdf comes out right size
}
@media only screen {
  html {
    font-size: 22px;
  }
}
```

或使用以下方法重置base-font-size变量：

```{css,echo = FALSE}
@page {
  size: 10in 5.625in; # makes sure pdf comes out right size
}
@media only screen {
  :root {
    --base-font-size: 22px;
  }
}
```

这将被现有的html字体大小调用自动使用（假设您使用的是xaringanthemer-如果没有使用，则应该很容易地进行调整）。

实际上，您可以做得更好，并且可以自动缩放所有内容，包括基本html字体（如果您这样做的话），

```{css,echo = FALSE}
@page {
  size: 10in 5.625in; # makes sure pdf comes out right size
}
@media only screen {
  html {
    font-size: calc(1.23 * var(--base-font-size));
  }
}
```

通过这种方式，如果您在base_font_size中更改了xaringanthemer选项，则无需手动更改其他任何内容（使用前两种方法，您必须输入并增大字体大小相应地。）

我之所以使用1.23是因为它在我的屏幕上很适合我-但是，因为我不理解为什么字体表现不一致，所以我真的不确定这是一个适用于不同字体的健壮解决方案屏幕。实际上，我敢打赌不是。我的CSS和JS基本不存在，因此可以提出更好的解决方案-我暗中怀疑您可以以比我更有针对性的方式使用@media。

很显然，您可能希望将以上内容放在.css文件中，而不是放在.Rmd顶部的代码块中，以保持整洁。

编辑：似乎1.23接近Google幻灯片定义的幻灯片的“实际”物理尺寸（10“ x 5.625”）和我的显示器的物理尺寸（14.1“）之间的比率-因此，这就是为什么。但是必须检查多个不同的显示尺寸以确认。