garrick
/
xaringanthemer
miroir de https://github.com/gadenbuie/xaringanthemer.git
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Tickets 0 Versions 10 Wiki Activité
😎 Give your xaringan slides some style
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
25 Révisions
5 Branches
Aborescence: 0a104fabe2
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de '0a104fabe2'
${ noResults }
xaringanthemer/dev/articles/fonts.html

182 lines
12KB
Brut Annotations Historique 

  1. <!DOCTYPE html>

  2. <!-- Generated by pkgdown: do not edit by hand --><html lang="en">

  3. <head>

  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  5. <meta charset="utf-8">

  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">

  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">

  8. <title>Fonts • xaringanthemer</title>

  9. <!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><!-- Bootstrap --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-bZLfwXAP04zRMK2BjiO8iu9pf4FbLqX6zitd+tIvLhE=" crossorigin="anonymous">

  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4=" crossorigin="anonymous"></script><!-- bootstrap-toc --><link rel="stylesheet" href="../bootstrap-toc.css">

  11. <script src="../bootstrap-toc.js"></script><!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous">

  12. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous">

  13. <!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script><!-- headroom.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script><!-- pkgdown --><link href="../pkgdown.css" rel="stylesheet">

  14. <script src="../pkgdown.js"></script><link href="../extra.css" rel="stylesheet">

  15. <meta property="og:title" content="Fonts">

  16. <meta property="og:description" content="xaringanthemer">

  17. <meta name="twitter:card" content="summary">

  18. <meta name="twitter:creator" content="@grrrck">

  19. <meta name="twitter:site" content="@grrrck">

  20. <meta name="robots" content="noindex">

  21. <!-- mathjax --><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script><!--[if lt IE 9]>

  22. <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

  23. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

  24. <![endif]-->

  25. </head>

  26. <body data-spy="scroll" data-target="#toc">

  27.     <div class="container template-article">

  28.       <header><div class="navbar navbar-default navbar-fixed-top" role="navigation">

  29.   <div class="container">

  30.     <div class="navbar-header">

  31.       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">

  32.         <span class="sr-only">Toggle navigation</span>

  33.         <span class="icon-bar"></span>

  34.         <span class="icon-bar"></span>

  35.         <span class="icon-bar"></span>

  36.       </button>

  37.       <span class="navbar-brand">

  38.         <a class="navbar-link" href="../index.html">xaringanthemer</a>

  39.         <span class="version label label-danger" data-toggle="tooltip" data-placement="bottom" title="In-development version">0.2.0.9100</span>

  40.       </span>

  41.     </div>

  42. 

  43.     <div id="navbar" class="navbar-collapse collapse">

  44.       <ul class="nav navbar-nav">

  45. <li>

  46.   <a href="../articles/xaringanthemer.html">Get started</a>

  47. </li>

  48. <li>

  49.   <a href="../reference/index.html">Reference</a>

  50. </li>

  51. <li>

  52.   <a href="../articles/themes.html">Themes</a>

  53. </li>

  54. <li>

  55.   <a href="../articles/fonts.html">Fonts</a>

  56. </li>

  57. <li>

  58.   <a href="../articles/template-variables.html">Template Variables</a>

  59. </li>

  60.       </ul>

  61. <ul class="nav navbar-nav navbar-right">

  62. <li>

  63.   <a href="../news/index.html">

  64.     <span class="fa fa fa fa-newspaper-o fa-lg"></span>

  65.      

  66.     

  67.   </a>

  68. </li>

  69. <li>

  70.   <a href="https://github.com/gadenbuie/xaringanthemer">

  71.     <span class="fa fa-github fa-lg"></span>

  72.      

  73.   </a>

  74. </li>

  75. <li>

  76.   <a href="https://twitter.com/grrrck">

  77.     <span class="fa fa-twitter fa-lg"></span>

  78.      

  79.   </a>

  80. </li>

  81. <li>

  82.   <a href="https://www.garrickadenbuie.com">

  83.     <span class="fa fa-home fa-lg"></span>

  84.      

  85.   </a>

  86. </li>

  87.       </ul>

  88. </div>

  89. <!--/.nav-collapse -->

  90.   </div>

  91. <!--/.container -->

  92. </div>

  93. <!--/.navbar -->

  94. 

  95.       

  96. 

  97.       </header><div class="row">

  98.   <div class="col-md-9 contents">

  99.     <div class="page-header toc-ignore">

  100.       <h1 data-toc-skip>Fonts</h1>

  101.             

  102.       

  103.       <small class="dont-index">Source: <a href="https://github.com/gadenbuie/xaringanthemer/blob/master/vignettes/fonts.Rmd"><code>vignettes/fonts.Rmd</code></a></small>

  104.       <div class="hidden name"><code>fonts.Rmd</code></div>

  105. 

  106.     </div>

  107. 

  108.     

  109.     

  110. <!-- Need to set [adding-custom-css] -->

  111. <div id="default-fonts" class="section level3">

  112. <h3 class="hasAnchor">

  113. <a href="#default-fonts" class="anchor"></a>Default Fonts</h3>

  114. <p><strong>xaringanthemer</strong> by default uses a different set of default fonts for heading and body fonts. The new defaults use <a href="https://fonts.google.com/specimen/Cabin">Cabin</a> for headings and <a href="https://fonts.google.com/specimen/Noto+Sans">Noto Sans</a> for body text. These fonts are easier to read on screens and at a distance during presentations, and they support a wide variety of languages and weights. Another reason for the change is that the xaringan (remarkjs) default body font, <em>Droid Serif</em>, is no longer officially included in Google Fonts.</p>

  115. <p>If you would like to use the fonts from the <a href="https://slides.yihui.name/xaringan/">default xaringan theme</a>, you can use the following arguments in your style function.</p>

  116. <div class="sourceCode" id="cb1"><html><body><pre class="r"><span class="fu"><a href="../reference/style_xaringan.html">style_xaringan</a></span>(

  117.   <span class="kw">text_font_family</span> <span class="kw">=</span> <span class="st">"Droid Serif"</span>,

  118.   <span class="kw">text_font_url</span> <span class="kw">=</span> <span class="st">"https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic"</span>,

  119.   <span class="kw">header_font_google</span> <span class="kw">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span>(<span class="st">"Yanone Kaffeesatz"</span>)

  120. )</pre></body></html></div>

  121. </div>

  122. <div id="custom-and-google-font-fonts" class="section level3">

  123. <h3 class="hasAnchor">

  124. <a href="#custom-and-google-font-fonts" class="anchor"></a>Custom and <em>Google Font</em> Fonts</h3>

  125. <p><strong>xaringanthemer</strong> makes it easy to use <a href="https://fonts.google.com">Google Fonts</a> in your presentations (provided you have an internet connection during the presentation) or to fully specify your font files.</p>

  126. <p>To use <a href="https://fonts.google.com">Google Fonts</a>, set the <code>&lt;type&gt;_font_google</code> theme arguments – <code>text_font_google</code>, <code>header_font_google</code>, <code>code_font_google</code> — using the <code><a href="../reference/google_font.html">google_font()</a></code> helper. The help documentation in <code><a href="../reference/google_font.html">?google_font</a></code> provides more info.</p>

  127. <div class="sourceCode" id="cb2"><html><body><pre class="r"><span class="fu"><a href="../reference/style_mono_light.html">style_mono_light</a></span>(

  128.   <span class="kw">header_font_google</span> <span class="kw">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span>(<span class="st">"Josefin Slab"</span>, <span class="st">"600"</span>),

  129.   <span class="kw">text_font_google</span>   <span class="kw">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span>(<span class="st">"Work Sans"</span>, <span class="st">"300"</span>, <span class="st">"300i"</span>),

  130.   <span class="kw">code_font_google</span>   <span class="kw">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span>(<span class="st">"IBM Plex Mono"</span>)

  131. )</pre></body></html></div>

  132. <p>If you set an <code>&lt;type&gt;_font_google</code> theme arguments, then <code>&lt;type&gt;_font_family</code>, <code>&lt;type&gt;_font_weight</code> and <code>&lt;type&gt;_font_url</code> are overwritten – where <code>&lt;type&gt;</code> is one of <code>header</code>, <code>text</code>, or <code>code</code>.</p>

  133. <p>To use a font hosted outside of Google fonts, you need to provide both <code>&lt;type&gt;_font_family</code> and <code>&lt;type&gt;_font_url</code>. For example, suppose you want to use a code font with ligatures for your code chunks, such as <a href="https://github.com/tonsky/FiraCode">Fira Code</a>, which would be declared with <code>code_font_family</code>. The <a href="https://github.com/tonsky/FiraCode#browser-support">browser usage</a> section of the Fira Code README provides a CSS URL to be used with an <code>@import</code> statement that you can use with the <code>code_font_url</code> argument.</p>

  134. <div class="sourceCode" id="cb3"><html><body><pre class="r"><span class="fu"><a href="../reference/style_solarized_dark.html">style_solarized_dark</a></span>(

  135.   <span class="kw">code_font_family</span> <span class="kw">=</span> <span class="st">"Fira Code"</span>,

  136.   <span class="kw">code_font_url</span> <span class="kw">=</span> <span class="st">"https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/fira_code.css"</span>

  137. )</pre></body></html></div>

  138. <p>Remember that you need to supply either <code>&lt;type&gt;_google_font</code> using the <code><a href="../reference/google_font.html">google_font()</a></code> helper <em>or both</em> <code>&lt;type&gt;_font_family</code> and <code>&lt;type&gt;_font_url</code>.</p>

  139. </div>

  140. <div id="using-additional-fonts" class="section level3">

  141. <h3 class="hasAnchor">

  142. <a href="#using-additional-fonts" class="anchor"></a>Using Additional Fonts</h3>

  143. <p>If you want to use additional fonts for use in <a href="xaringanthemer.html#adding-custom-css">custom CSS definitions</a>, use the <code>extra_fonts</code> argument to pass a list of URLs or <code><a href="../reference/google_font.html">google_font()</a></code>s. Notice that you will need to add custom CSS (for example, via <code>extra_css</code>) to use the fonts imported in <code>extra_fonts</code>.</p>

  144. <div class="sourceCode" id="cb4"><html><body><pre class="r"><span class="fu"><a href="../reference/style_mono_light.html">style_mono_light</a></span>(

  145.   <span class="kw">extra_fonts</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(

  146.     <span class="fu"><a href="../reference/google_font.html">google_font</a></span>(<span class="st">"Sofia"</span>),

  147.     <span class="co"># Young Serif by uplaod.fr</span>

  148.     <span class="st">"https://cdn.jsdelivr.net/gh/uplaod/YoungSerif/fonts/webfonts/fontface.css"</span>,

  149.   ),

  150.   <span class="kw">extra_css</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(

  151.     <span class="st">".title-slide h2"</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="st">"font-family"</span> <span class="kw">=</span> <span class="st">"Sofia"</span>),

  152.     <span class="kw">blockquote</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="st">"font-family"</span> <span class="kw">=</span> <span class="st">"youngserifregular"</span>)

  153.   )

  154. )</pre></body></html></div>

  155. </div>

  156.   </div>

  157. 

  158.   <div class="col-md-3 hidden-xs hidden-sm" id="pkgdown-sidebar">

  159. 

  160.       </div>

  161. 

  162. </div>

  163. 

  164. 

  165. 

  166.       <footer><div class="copyright">

  167.   <p>Developed by <a href="https://www.garrickadenbuie.com">Garrick Aden-Buie</a>.</p>

  168. </div>

  169. 

  170. <div class="pkgdown">

  171.   <p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.5.1.</p>

  172. </div>

  173. 

  174.       </footer>

  175. </div>

  176. 

  177.   

  178. 

  179. 

  180.   </body>

  181. </html>