Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>No: there have been many bugs over the years on various platforms which cause text not to be displayed or displayed incorrectly (see below). If your goal is to enable ligatures, there's actually standard property <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures" rel="noreferrer"><code>font-variant-ligatures</code></a> defined in <a href="http://dev.w3.org/csswg/css-fonts-3/#propdef-font-variant-ligatures" rel="noreferrer">CSS Fonts Level 3</a> which offers full control:</p> <pre class="lang-css prettyprint-override"><code>font-variant-ligatures: common-ligatures; font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures; </code></pre> <p>See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant" rel="noreferrer"><code>font-variant</code></a> for other typographic features which can be enabled such as small caps, alternate letter forms, etc.</p> <h3>History</h3> <p>Before <code>font-variant-ligatures</code> &amp; the related properties were added, the older <a href="https://developer.mozilla.org/en-US/docs/CSS/font-feature-settings" rel="noreferrer"><code>font-feature-settings</code></a> property allowed the same feature to be enabled. This is a lower-level interface and is no longer recommended except to enable OpenType features which do not have a higher-level interface.</p> <p><a href="http://blog.fontdeck.com/post/15777165734/opentype-1" rel="noreferrer">http://blog.fontdeck.com/post/15777165734/opentype-1</a> has a simple example:</p> <pre class="lang-css prettyprint-override"><code>h1 { -webkit-font-feature-settings: "liga", "dlig"; -moz-font-feature-settings: "liga=1, dlig=1"; -ms-font-feature-settings: "liga", "dlig"; font-feature-settings: "liga", "dlig"; } </code></pre> <p><a href="http://elliotjaystocks.com/blog/the-fine-flourish-of-the-ligature/" rel="noreferrer">http://elliotjaystocks.com/blog/the-fine-flourish-of-the-ligature/</a> has more discussion as well.</p> <h2>Bug Gallery</h2> <p>The popular HTML5 Boilerplate project removed it two years ago due to various rendering problems:</p> <p><a href="https://github.com/h5bp/html5-boilerplate/issues/78" rel="noreferrer">https://github.com/h5bp/html5-boilerplate/issues/78</a></p> <p>Two Chromium bugs which I just fixed this morning caused Chrome 21 on Windows XP to either fail to perform font substitution at all, displaying the missing character symbol rather than using one from a different font, and displaying text incorrectly overlapping other elements:</p> <p><a href="http://code.google.com/p/chromium/issues/detail?id=114719" rel="noreferrer">http://code.google.com/p/chromium/issues/detail?id=114719</a></p> <p><a href="http://code.google.com/p/chromium/issues/detail?id=149548" rel="noreferrer">http://code.google.com/p/chromium/issues/detail?id=149548</a></p> <p>See <a href="http://aestheticallyloyal.com/public/optimize-legibility/" rel="noreferrer">http://aestheticallyloyal.com/public/optimize-legibility/</a> for a few other concerns.</p> <p><a href="http://bocoup.com/weblog/text-rendering/" rel="noreferrer">http://bocoup.com/weblog/text-rendering/</a> highlighted compatibility problems on Android and general performance issues</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload