Как включить @ font-face в тег стиля RMarkdown? - PullRequest
Новая
       101

Как включить @ font-face в тег стиля RMarkdown?

0 голосов
/ 30 апреля 2020

Можно ли использовать CSS @ font-face для предоставления файлов шрифтов 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 (без тегов стиля) работает при сохранении во внешнем. css файле локально и на него ссылаются в yaml Rmd с 

---
title: "My Rmarkdown doc"
date: "28 April 2020"
output: 
  html_document:
    css: mystyles.css
---

Конечная цель

В случае, если это проблема A / B, моя простая цель - применить пользовательский шрифт, избегая при этом использования каких-либо локальных файлов, кроме самого файла Rmd (т.е. никаких локальных внешних таблиц стилей, хотя чтение файлов из Интернета - это нормально)

Я считаю, что единственными двумя вариантами являются либо чтение файла шрифта из Интернета в <style> ... </style>, либо base64, кодирующая информацию о шрифте в тегах самого Rmd . Я пробовал оба с небольшим успехом.

Третьим вариантом может быть предоставление URL-адреса (в таблицу стилей) для значения yaml, хотя я не уверен, возможно ли это 

  html_document:
    code_folding: hide
    css: get_file(www.mysite.com/mystyles.css)

Дальнейшие попытки

Для большей уверенности я также попытался 

```{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>
```

Обновить

Я узнал, что вы не можете объявить @font-face в теле HTML, но должны сделать это в заголовке. Мы действительно можем добавить HTML теги в заголовок RMarkdown , но это читается во внешнем файле, а это именно то, чего я пытаюсь избежать, поэтому я возвращаюсь к квадрату 1.

1 Ответ

1 голос
/ 01 мая 2020

Для всех, кто хочет сделать это, этот ответ был тем, что помогло.

В основном:

  1. Скачать файл .tff (шрифт) с любого веб-сайта шрифтов
  2. Преобразовать его в base64 (для ma c, просто * 1011) *
  3. Скопируйте содержимое myfont_base64.txt в заполнитель ниже и поместите весь лот где-то в RMarkdown (он не обязательно должен быть в HTML <head>, как я ранее подозревал, но где угодно, например, <body> в порядке) 
<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>
...