web-dev-qa-db-ja.com

Reveal.jsでフォントを追加および変更する方法は？

次のプレゼンテーションでreveal.jsを使用しています。見出しに使用するデフォルトのフォントを変更したいと思います。

reveal.jsでフォントを追加および変更するにはどうすればよいですか？

reveal.js
21
Luzan Baral

あなたが使用している現在のテーマのcssファイルを変更することでそれを行うことができます。

テーマファイルは/css/theme/[yourtheme].cssフォルダーにあります

テーマのcssファイルを開くと、以下のようなヘッダーのセクションが表示されます

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 20px 0;
  color: #eee8d5;
  font-family: "League Gothic", Impact, sans-serif;
  line-height: 0.9em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: none; }

これで、ヘッダーの任意の属性を変更できます。

17
Aatish Sai

実際にはたくさんのフォントがあります。プレゼンテーションに適切なテーマを見つけるには、さまざまなテーマを検討する必要があるだけです。デフォルトのテーマで同様の問題があり、それを他のテーマに変更し、css/theme内でテーマを見つけました

テーマを変更するには、index.htmlファイルのリンクタグを変更します

<link rel="stylesheet" href="css/theme/default.css" id="theme">

default.cssを他のテーマファイルに変更する

<link rel="stylesheet" href="css/theme/solarized.css" id="theme">

それがうまくいくことを願っています。

それでもフォントを変更したい場合は、テーマのcssファイルに移動して、使用するテーマ内の各タグのfont-familyを変更できます。

3
user4235686

Aatish-saiの回答に追加します（ありがとう！）。

基本テーマテンプレートはこちらです https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss 。

Jupyterノートブックから生成されたReveal.jsスライドに表示されるフォントを（たとえば、Fira Sansに）変更したい場合foo.ipynb、次のテキストを書くだけで十分です

.reveal,
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  font-family: "Fira Sans";
}

ファイルfoo.cssはノートブックと同じディレクトリにあります。

0
coltongrainger