如何在RMarkdown的样式标签中包含@ font-face? [英] How to include @font-face within style tag of RMarkdown?
问题描述
是否可以使用 CSS @ font-face 提供字体文件给RMarkdown?
Is it possible to use the CSS @font-face to provide font files to an RMarkdown?
例如:
<style>
@font-face {
font-family: "Custom";
src: url(https://github.com/stevecondylios/fonts/raw/master/CircularStd-Book.ttf) format("truetype");
}
body {
font-family: "Custom", Verdana, Tahoma;
}
</style>
请注意，当它存储在本地外部.css文件中并在Rmd的Yaml中使用以下代码引用时，上面完全相同的CSS代码(减去样式标签) 起作用
Note that the exact same css code above (less the style tags) does work when it's stored in an external .css file locally and referenced in the Rmd's yaml with
---
title: "My Rmarkdown doc"
date: "28 April 2020"
output:
html_document:
css: mystyles.css
---
最终目标
如果这是一个A/B问题，我的简单目标是应用自定义字体，同时避免使用Rmd文件本身以外的任何本地文件(即，没有本地外部样式表，尽管可以从Web上读取文件) .
Ultimate goal
In case this is an A/B problem, my simple goal is to apply a custom font while avoiding using any local files beyond the Rmd file itself (i.e. no local external style sheets, although reading files from the web is fine).
我相信仅有的两个选择是在<style> ... </style>中从网络中读取字体文件，或者是
I believe the only two options are either reading a font file in from the web within <style> ... </style>, or base64 encoding the font info within the tags of the Rmd itself. I've been trying both with little success.
第三个选择可能是提供一个到yaml值的网址(到样式表)，尽管我不确定这是否可能
A third option could be to provide a url (to a style sheet) to a yaml value, although I am not sure if that's possible
html_document:
code_folding: hide
css: get_file(www.mysite.com/mystyles.css)
进一步尝试
为了很好，我也尝试过
Further attempts
For good measure, I also tried
```{r}
css_url <- "https://github.com/stevecondylios/fonts/raw/master/CircularStd-Book.ttf"
```
<style>
@font-face {
font-family: "Custom";
src: url(`r css_url`) format("truetype");
}
body {
font-family: "Custom", Verdana, Tahoma;
}
</style>
```
更新
我了解到您不能在HTML正文中声明@font-face，但必须在标头中声明.我们确实可以将HTML标签添加到RMarkdown标头中，但这会读取一个外部文件，这正是我所需要的试图避免，所以回到方格1.
Update
I have learned you cannot declare @font-face in the HTML body, but must do so in the header. We can indeed add HTML tags into the RMarkdown header, but this reads in an external file, which is precisely what I'm trying to avoid, so am back to square 1.
推荐答案
对于其他想要这样做的人，此答案是有帮助的.
For anyone else who wants to do this, this answer was what helped.
基本上:
- 从任何字体网站下载
.tff(字体)文件 - 将其转换为base64(在Mac上，只需
base64 myfont.ttf > myfont_base64.txt - 将
myfont_base64.txt的内容复制到下面的占位符中，然后将全部内容放置在RMarkdown中(不必像我以前所怀疑的那样放在HTML<head>中，但可以放置在任何地方，例如<body>很好)
- Download a
.tff(font) file from any font website - Convert it to base64 (on mac, simply
base64 myfont.ttf > myfont_base64.txt - Copy the contents of
myfont_base64.txtin the placeholder below, and place the whole lot somewhere in your RMarkdown (it doesn't have to be in the HTML<head>as I previously suspected, but anywhere e.g. the<body>is fine)
<style>
@font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: "myfont", Verdana, Tahoma;
}
</style>
这篇关于如何在RMarkdown的样式标签中包含@ font-face?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
