java
/
jMonkeyEngine-wiki
зеркало из https://github.com/jMonkeyEngine/wiki.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Inline Text Styles :: jMonkeyEngine Docs</title>
    <link rel="canonical" href="https://wiki.jmonkeyengine.org/wiki-ui/inline-text-styles.html">
    <link rel="prev" href="style-guide.html">
    <link rel="next" href="admonition-styles.html">
    <meta name="generator" content="Antora 2.3.3">
    <link rel="stylesheet" href="../_/css/site.css">
<meta property="og:image" content="https://wiki.jmonkeyengine.org/_/img/iconx128.png">
<meta property="og:description" content="Inline Text Styles">
<meta property="og:title" content="jMonkeyEngine Docs">
<link rel="stylesheet" href="../_/css/site-extra.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/jMonkeyDocLogo.png" height="32" type="image/x-icon">
      </a>
      <div class="navbar-item hide-for-print">
        <input type="text" placeholder="Search docs..." id="search-input"/>
      </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" 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 is-current-page" 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">Docs</span>
      <ul class="versions">
        <li class="version is-latest">
          <a href="../docs/documentation.html">master</a>
        </li>
      </ul>
    </li>
    <li class="component is-current">
      <span class="title">Wiki UI</span>
      <ul class="versions">
        <li class="version is-current is-latest">
          <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="style-guide.html">UI Element Styles</a></li>
    <li><a href="inline-text-styles.html">Inline Text</a></li>
  </ul>
</nav>
  <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki-ui/edit/master/docs/modules/ROOT/pages/inline-text-styles.adoc">Edit this Page</a></div>
  </div>
  <div class="content">
<article class="doc">
<h1 class="page">Inline Text Styles</h1>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>This page describes how to style text in the contents of the page which is visually emphasized.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="bold"><a class="anchor" href="#bold"></a>Bold text (&lt;strong&gt;)</h2>
<div class="sectionbody">
<div class="paragraph">
<p>How <a href="#antora:asciidoc:bold.adoc" class="page unresolved">text marked as bold</a> appears on your site depends on the fonts loaded by the UI and the CSS styles the UI applies to the <code>&lt;strong&gt;</code> HTML tag.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">A bold &lt;strong&gt;word&lt;/strong&gt;, or a bold &lt;strong&gt;phrase of text&lt;/strong&gt;.</code></pre>
</div>
</div>
<div class="paragraph">
<p>Since <code>&lt;strong&gt;</code> is a semantic HTML element, it automatically inherits default styling (<code>font-weight: bold</code>) from the browser.
If you want to override the browser styles, you&#8217;ll need to define properties on the <code>strong</code> selector in the stylesheet for your UI.</p>
</div>
<div class="paragraph">
<p>In the default UI, the <code>&lt;strong&gt;</code> element is styled in the 500 font weight of the current typeface (Roboto).
For example:</p>
</div>
<div class="exampleblock">
<div class="content">
A bold <strong>word</strong>, or a bold <strong>phrase of text</strong>.
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="italic"><a class="anchor" href="#italic"></a>Italic text (&lt;em&gt;)</h2>
<div class="sectionbody">
<div class="paragraph">
<p>How <a href="#antora:asciidoc:italic.adoc" class="page unresolved">italicized text</a> appears on your site depends on the fonts loaded by the UI and the CSS styles the UI applies to the <code>&lt;em&gt;</code> HTML tag.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">An italic &lt;em&gt;word&lt;/em&gt;, or an italic &lt;em&gt;phrase of text&lt;/em&gt;.</code></pre>
</div>
</div>
<div class="paragraph">
<p>Since <code>&lt;em&gt;</code> is a semantic HTML element, it automatically inherits default styling (<code>font-style: italic</code>) from the browser.
If you want to override the browser styles, you&#8217;ll need to define properties on the <code>em</code> selector in the stylesheet for your UI.</p>
</div>
<div class="paragraph">
<p>In the default UI, the <code>em</code> element is styled in the italic font variant of the current typeface (Roboto).
For example:</p>
</div>
<div class="exampleblock">
<div class="content">
An italic <em>word</em>, or an italic <em>phrase of text</em>.
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="monospace"><a class="anchor" href="#monospace"></a>Monospace text (&lt;code&gt;)</h2>
<div class="sectionbody">
<div class="paragraph">
<p>How <a href="#antora:asciidoc:monospace.adoc" class="page unresolved">inline monospace text</a> is displayed depends on the fixed-width font loaded by your UI and the CSS styles it applies to the <code>&lt;code&gt;</code> HTML tag.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">A monospace &lt;code&gt;word&lt;/code&gt;, or a monospace &lt;code&gt;phrase of text&lt;/code&gt;.</code></pre>
</div>
</div>
<div class="paragraph">
<p>Since <code>&lt;code&gt;</code> is a semantic HTML element, it automatically inherits default styling (<code>font-family: monospace</code>) from the browser.
If you want to override the browser styles, you&#8217;ll need to define properties on the <code>code</code> selector in the stylesheet for your UI.</p>
</div>
<div class="paragraph">
<p>In the default UI, the <code>code</code> element is styled using the fixed-width font loaded by the stylesheet (Roboto Mono).
For example:</p>
</div>
<div class="exampleblock">
<div class="content">
A monospace <code>word</code>, or a monospace <code>phrase of text</code>.
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="highlight"><a class="anchor" href="#highlight"></a>Highlighted text (&lt;mark&gt;)</h2>
<div class="sectionbody">
<div class="paragraph">
<p>How <a href="#antora:asciidoc:highlight.adoc" class="page unresolved">highlighted (or marked) text</a> appears on your site depends on the CSS styles the UI applies to the <code>&lt;mark&gt;</code> HTML tag.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">Let&amp;#8217;s add some &lt;mark&gt;highlight&lt;/mark&gt; to it.</code></pre>
</div>
</div>
<div class="paragraph">
<p>Since <code>&lt;mark&gt;</code> is a semantic HTML element, it automatically inherits default styling (<code>background-color: yellow</code>) from the browser.
Here&#8217;s an example:</p>
</div>
<div class="exampleblock">
<div class="content">
Let&#8217;s add some <mark>highlight</mark> to it.
</div>
</div>
<div class="paragraph">
<p>If you want to override the browser styles, you&#8217;ll need to define properties on the <code>mark</code> selector in the stylesheet for your UI.</p>
</div>
</div>
</div>
<nav class="pagination">
  <span class="prev"><a href="style-guide.html">UI Element Styles</a></span>
  <span class="next"><a href="admonition-styles.html">Admonitions</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/site.js"></script>
<script async src="../_/js/vendor/highlight.js"></script>
  </body>
</html>