R Markdown采用DOCCO线性风格

Question

我正准备使用knitr包（DOCCO linear style）支持的knitr来编写包的插图。

在他们的example vignette中，在HTML文件的乞讨和结尾处出现了一个漂亮的图形。

但是当我试图维护自己的小插图时，这些图形没有出现，而是出现了一个巨大的8和h字母：P如下所示：

任何人都可以告诉我为什么会发生这种情况并且maby如何解决这个问题？

我正在使用以下语法将.Rmd中写的小插图转换为.HTML：

晕影：

<!--
%\VignetteEngine{knitr::docco_linear}
%\VignetteIndexEntry{The archivist package compedium}
-->

# The archivist package compedium

```{r}
summary(cars)
```

和转换它的功能：

knitr::knit2html(input = "vignettes/archivist.Rmd", 
                 output = "vignettes/archivist.md", 
                 template = system.file("misc", "docco-template.html", 
                 package = "knitr"))

请注意，您应该在计算机上安装npm。

通过终端安装：

sudo apt-get install npm

然后安装docco：

sudo npm install -g docco

感谢您的任何建议！

编辑：

首先，在markdown编译之后，我在创建它的Oracle虚拟机上打开了ubuntu的firefox下的vignette文件，因为我无法在Windows上下载和安装docoo。它在输出文件中显示为丑陋的8。

但是，当我通过电子邮件将此文件发送给自己并在Windows上打开时，它看起来完全正如我在制作时所希望的那样。请查看以下

所以，我打开了knitr vignette手册，解释了firefox中虚拟机上的ubuntu上的docco样式，看起来它有8符号！

我认为它必定是某种编码问题？我对吗？将它发送到Windows后它运行良好并且看起来很好：P 任何人都可以解释我这一天的废话吗？

谢谢：）

Answer 1

该内容是通过docco.css文件中的CSS添加的。对于标题图片，他们有

h1:after {
  content: "8";
  display: block;
  font-family: "fleurons";
  color: #999;
  font-size: 80px;
  padding: 10px 0 25px;
}

所以他们在标题后面的页面中插入了一个“8”。但他们已将字体指定为“fleurons”。这是一个webfont，它们也在同一个css文件中定义。

@font-face {
    font-family: 'fleurons';
    src: url('public/fonts/fleurons.eot');
    src: url('public/fonts/fleurons.eot?#iefix') format('embedded-opentype'),
         url('public/fonts/fleurons.woff') format('woff'),
         url('public/fonts/fleurons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

因此，为了使“8”看起来像他们所拥有的花哨符号，您需要将这个特定的webfont用于您的网页。同样适用于页面末尾的“h”。