java
/
jMonkeyEngine-wiki
-ын хуулбар https://github.com/jMonkeyEngine/wiki.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Add Fonts :: jMonkeyEngine Docs</title>
    <link rel="canonical" href="https://wiki.jmonkeyengine.org/wiki-ui/add-fonts.html">
    <link rel="prev" href="stylesheets.html">
    <link rel="next" href="style-guide.html">
    <meta name="generator" content="Antora 3.0.1">
    <link rel="stylesheet" href="../_/css/site.css">
<meta property="og:image" content="https://wiki.jmonkeyengine.org/_/img/iconx128.png">
<meta property="og:description" content="Add Fonts">
<meta property="og:title" content="jMonkeyEngine Docs">
<link rel="stylesheet" href="../_/css/site-extra.css">
<link rel="stylesheet" href="../_/css/vendor/docsearch.min.css">
<!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css -->
<link rel="icon" href="../_/img/favicon.ico" type="image/x-icon">
  </head>
  <body class="article">
<header class="header">
  <nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://wiki.jmonkeyengine.org">
        <img alt="" src="../_/img/jme-logo.png" height="32" type="image/x-icon">
      </a>
      <div class="navbar-item hide-for-print">
        <input id="search-input" type="text" placeholder="Search docs">
      </div>
      <button class="navbar-burger" data-target="topbar-nav">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
    <div id="topbar-nav" class="navbar-menu">
      <div class="navbar-end">
        <div class="navbar-item theme-switch-wrapper">
          <label class="theme-switch" for="checkbox">
            <input type="checkbox" id="checkbox" />
            <div class="slider round"></div>
          </label>
        </div>
        <a class="navbar-item" href="https://github.com/jmonkeyengine/wiki">Github</a>
      </div>
    </div>
  </nav>
</header>
<div class="body">
<div class="nav-container" data-component="wiki-ui" data-version="master">
  <aside class="nav">
    <div class="panels">
<div class="nav-panel-menu is-active" data-panel="menu">
  <nav class="nav-menu">
    <h3 class="title"><a href="index.html">Wiki UI</a></h3>
<ul class="nav-list">
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="prerequisites.html">UI Development Prerequisites</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="set-up-project.html">Set up a UI Project</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="build-preview-ui.html">Build and Preview the UI</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="development-workflow.html">UI Development Workflow</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="templates.html">Work with the Handlebars Templates</a>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="stylesheets.html">Work with the CSS Stylesheets</a>
<ul class="nav-list">
  <li class="nav-item is-current-page" data-depth="2">
    <a class="nav-link" href="add-fonts.html">Add Fonts</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="style-guide.html">UI Element Styles</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="inline-text-styles.html">Inline Text</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="admonition-styles.html">Admonitions</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="list-styles.html">Lists</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="sidebar-styles.html">Sidebars</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="ui-macro-styles.html">UI Macros</a>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </nav>
</div>
<div class="nav-panel-explore" data-panel="explore">
  <div class="context">
    <span class="title">Wiki UI</span>
    <span class="version">master</span>
  </div>
  <ul class="components">
    <li class="component">
      <span class="title">JME</span>
      <ul class="versions">
        <li class="version">
          <a href="../docs/3.8/documentation.html">3.8</a>
        </li>
        <li class="version">
          <a href="../docs/3.4/documentation.html">3.4</a>
        </li>
        <li class="version">
          <a href="../docs/3.3/documentation.html">3.3</a>
        </li>
        <li class="version">
          <a href="../docs/3.2/documentation.html">3.2</a>
        </li>
      </ul>
    </li>
    <li class="component">
      <span class="title">Wiki Contribution</span>
      <ul class="versions">
        <li class="version">
          <a href="../docs-wiki/3.8/wiki_contributor.html">3.8</a>
        </li>
      </ul>
    </li>
    <li class="component is-current">
      <span class="title">Wiki UI</span>
      <ul class="versions">
        <li class="version is-current">
          <a href="index.html">master</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
    </div>
  </aside>
</div>
<main class="article">
<div class="toolbar" role="navigation">
<button class="nav-toggle"></button>
<nav class="breadcrumbs" aria-label="breadcrumbs">
  <ul>
    <li><a href="index.html">Wiki UI</a></li>
    <li><a href="stylesheets.html">Work with the CSS Stylesheets</a></li>
    <li><a href="add-fonts.html">Add Fonts</a></li>
  </ul>
</nav>
  <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki-ui/edit/master/docs/modules/ROOT/pages/add-fonts.adoc">Edit this Page</a></div>
  </div>
  <div class="content">
<article class="doc">
<h1 class="page">Add Fonts</h1>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>This page explains how to add new fonts to your UI.
These instructions assume you&#8217;ve forked the default UI and are able to customize it.</p>
</div>
<div class="paragraph">
<p>There are three steps involved:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Add the font to your UI project</p>
</li>
<li>
<p>Add a font-face declaration to your stylesheet</p>
</li>
<li>
<p>Use the new font in your stylesheet</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>How you reference the font file in the font-face declaration depends on how you decide to manage it.
You can manage the font with npm or download it manually and add it directly to your UI project.
The following sections describe each approach in turn.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="npm-managed"><a class="anchor" href="#npm-managed"></a>npm managed</h2>
<div class="sectionbody">
<div class="paragraph">
<p>You can use npm (or Yarn) to manage the font.
This approach saves you from having to store the font file directly in your UI project.
Here are the steps involved.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Use npm (or Yarn) to install the font files from a package (e.g., <a href="https://www.npmjs.com/package/typeface-open-sans">typeface-open-sans</a>)</p>
<div class="literalblock">
<div class="content">
<pre>$ npm install --save typeface-open-sans</pre>
</div>
</div>
</li>
<li>
<p>In <em class="path">src/css</em>, add a corresponding CSS file (e.g., <em class="path">typeface-open-sans.css</em>)</p>
</li>
<li>
<p>In that file, declare the font face:</p>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src:
    local("Open Sans"),
    local("Open Sans-Regular"),
    url(~typeface-open-sans/files/open-sans-latin-400.woff) format("woff")
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>The Gulp build recognizes the <code>~</code> URL prefix and copies the font from the npm package to the build folder (and hence bundle).</p>
</div>
<div class="paragraph">
<p>You must define one @font-face for each font weight and style combination (e.g., <code>font-weight: 500</code> + <code>font-style: italic</code>) from the font that you want to use in your stylesheet.</p>
</div>
</li>
<li>
<p>Import the typeface CSS file you just created into the main stylesheet, <em class="path">src/css/site.css</em> (adjacent to the other typeface imports):</p>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">@import "typeface-open-sans.css";</code></pre>
</div>
</div>
</li>
<li>
<p>Repeat the previous steps for each font style and weight you want to use from that package.</p>
</li>
<li>
<p>Change the CSS to use your newly imported font:</p>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">html {
  font-family: "Open Sans", sans;
}</code></pre>
</div>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
If you&#8217;re building on the default UI, you may instead want to define or update the font family using a variable defined in <em class="path">src/css/vars.css</em>.
</td>
</tr>
</table>
</div>
</li>
<li>
<p>Test the new font by previewing your UI:</p>
<div class="literalblock">
<div class="content">
<pre>$ gulp preview</pre>
</div>
</div>
</li>
</ol>
</div>
<div class="paragraph">
<p>If you see the new font, you&#8217;ve now successfully added it to your UI.
If you aren&#8217;t sure, look for the <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts">All fonts on page</a> section in your browser&#8217;s developer tools to see whether the font was loaded.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="manual"><a class="anchor" href="#manual"></a>Manual</h2>
<div class="sectionbody">
<div class="paragraph">
<p>A simpler approach to adding fonts is to store them directly in your project.
Here are the steps involved.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Download the font files and add them to the <em class="path">src/font</em> folder.
Create this folder if it does not exist.</p>
</li>
<li>
<p>In <em class="path">src/css</em>, add a corresponding CSS file (e.g., <em class="path">typeface-open-sans.css</em>)</p>
</li>
<li>
<p>In that file, declare the font face:</p>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src:
    local("Open Sans"),
    local("Open Sans-Regular"),
    url(../font/open-sans-latin-400.woff) format("woff")
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>Note that the path is a relative path starting from the <em class="path">src/css</em> folder to the <em class="path">src/font</em> folder.</p>
</div>
<div class="paragraph">
<p>You must define one @font-face for each font weight and style combination (e.g., <code>font-weight: 500</code> + <code>font-style: italic</code>) from the font that you want to use in your stylesheet.</p>
</div>
</li>
<li>
<p>Import the typeface CSS file you just created into the main stylesheet, <em class="path">src/css/site.css</em> (adjacent to the other typeface imports):</p>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">@import "typeface-open-sans.css";</code></pre>
</div>
</div>
</li>
<li>
<p>Repeat the previous steps for each font style and weight you want to use.</p>
</li>
<li>
<p>Change the CSS to use your newly imported font:</p>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">html {
  font-family: "Open Sans", sans;
}</code></pre>
</div>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
If you&#8217;re building on the default UI, you may instead want to define or update the font family using a variable defined in <em class="path">src/css/vars.css</em>.
</td>
</tr>
</table>
</div>
</li>
<li>
<p>Test the new font by previewing your UI:</p>
<div class="literalblock">
<div class="content">
<pre>$ gulp preview</pre>
</div>
</div>
</li>
</ol>
</div>
<div class="paragraph">
<p>If you see the new font, you&#8217;ve now successfully added it to your UI.
If you aren&#8217;t sure, look for the <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts">All fonts on page</a> section in your browser&#8217;s developer tools to see whether the font was loaded.</p>
</div>
</div>
</div>
<nav class="pagination">
  <span class="prev"><a href="stylesheets.html">Work with the CSS Stylesheets</a></span>
  <span class="next"><a href="style-guide.html">UI Element Styles</a></span>
</nav>
</article>
<aside class="toc sidebar" data-title="Contents" data-levels="2">
  <div class="toc-menu"></div>
</aside>
  </div>
</main>
</div>
<footer class="footer">
  <p>Copyright 2020 jMonkeyEngine Wiki Contributors. Licensed BSD-3.</p>
</footer>
<script src="../_/js/vendor/docsearch.min.js"></script>
<!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js -->
<script>
var search = docsearch({
  apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
  indexName: 'jmonkeyengine',
  inputSelector: '#search-input',
  autocompleteOptions: { hint: false, keyboardShortcuts: ['s'] },
  algoliaOptions: { hitsPerPage: 10 }
}).autocomplete
search.on('autocomplete:closed', function () { search.autocomplete.setVal() })
function focusSearchInput () { document.querySelector('#search-input').focus() }
if (document.querySelector('.home-link.is-current')) window.addEventListener('load', focusSearchInput)
</script>
<script src="../_/js/site.js"></script>
<script async src="../_/js/vendor/highlight.js"></script>
  </body>
</html>