OpenType ãã©ã³ãç¹æ§ã®æå¼ã

ãã©ã³ãã®ç¹æ§ã®æç¡ã®ç¢ºèª

ä½¿ç¨ããçç±

'ff' ã 'fi' ã®ãããªååãä½¿ãã¨ãæåã®ééãããåä¸ã«ãªããããã¹ã ã¼ãºã«èªããããã«ãªãã¾ãã
åæ°ãä½¿ããã¨ã§ãæ¥æå¤§å·¥ãã¬ã·ãã®ãµã¤ããããè¦ããããåããããããªãã¾ãã
ããã¹ãã®æ®µè½åã®æ°åã 'oldstyle' ã«è¨å®ããã¨ãå°æåã®éã§ããè¦ãããã«éç½®ãããåæ§ã«æ°åã 'tabular numbers' ã«è¨å®ããã¨ãéé¡ã®ãªã¹ããè¡¨ã«è¨å®ããã¨ãã«è¦ãããä¸¦ã³ã¾ããä¸æ¹ã 'lining' ã®æ°åã¯ãåç¬ã§ããå¤§æåã®åèªã®åã§ããããçµ±ä¸æãããã¾ãã

OpenType ã®ç¹æ§ã¯ããã©ã³ãã®ç§å¯ã®ã³ã³ãã¼ãã¡ã³ãã®ãããªãã®ã§ããããããå©ç¨ã§ããããã«ãããã¨ã§ããã©ã³ãã®å¤è¦³ãåä½ãå¾®å¦ã«ããããã¯åçã«å¤åãããæ¹æ³ãè¦ã¤ãããã¨ãã§ãã¾ãããã¹ã¦ã® OpenType ç¹æ§ãå¸¸ã«ä½¿ç¨ããã®ã«é©ãã¦ããããã§ã¯ããã¾ããããããã¤ãã®ç¹æ§ã¯åªããçµçã«ä¸å¯æ¬ ã§ãã -- Tim Brown, Head of Typography at Adobe.

æã«ã¯ã¹ã¿ã¤ã«ã ãã§ãªãæ¬è³ªã«ãªããã¨ã

ãã©ã³ãç¹æ§

ã«ã¼ãã³ã°

é¢é£ããããããã£: font-kerning

<fieldset>
  <legend><code>font-kerning</code> ããããã£ãä½¿ç¨</legend>
  <div class="container container1">
    <p>Puffy Pangolins</p>
  </div>
  <input type="checkbox" name="checkbox1" id="checkbox1" value="on" checked />
  <label for="checkbox1">ã«ã¼ãã³ã°ãæå¹ã«ãã</label>
</fieldset>

<fieldset>
  <legend><code>font-feature-settings</code> ããããã£ãä½¿ç¨</legend>
  <div class="container container2">
    <p>Puffy Pangolins</p>
  </div>
  <input type="checkbox" name="checkbox2" id="checkbox2" value="on" checked />
  <label for="checkbox2">ã«ã¼ãã³ã°ãæå¹ã«ãã</label>
</fieldset>

@font-face {
  font-family: "Plex Serif";
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  src:
    url("https://mdn.github.io/shared-assets/fonts/plex/IBMPlexSerif-Regular.woff")
      format("woff"),
    url("https://mdn.github.io/shared-assets/fonts/plex/IBMPlexSerif-Regular.woff2")
      format("woff2");
}

body {
  font:
    1.2em "Plex Serif",
    "Times New Roman",
    serif;
  margin: 1rem;
}

fieldset {
  margin-bottom: 1rem;
}

label {
  user-select: none;
}

.container > p {
  font-size: 4rem;
  margin: 1.5rem 0;
}

css

/* kerning: auto|normal|none */
.container1 * {
  font-kerning: normal;
}
.inactive.container1 * {
  font-kerning: none;
}

/* 'kern' 1|0 (on or off) */
.container2 * {
  font-feature-settings: "kern" 1;
}
.inactive.container2 * {
  font-feature-settings: "kern" 0;
}

const checkBox1 = document.getElementById("checkbox1");
const checkBox2 = document.getElementById("checkbox2");
const container1 = document.querySelector(".container1");
const container2 = document.querySelector(".container2");

const toggleInactive = (checkBox, container) => {
  if (checkBox.checked) {
    container.classList.remove("inactive");
  } else {
    container.classList.add("inactive");
  }
};

checkBox1.addEventListener("change", () => {
  toggleInactive(checkBox1, container1);
});

checkBox2.addEventListener("change", () => {
  toggleInactive(checkBox2, container2);
});

ä»£æ¿åå½¢

é¢é£ããããããã£: font-variant-alternates

<fieldset>
  <legend><code>font-variant-alternates</code> ããããã£ãä½¿ç¨</legend>
  <div class="container container1">
    <p><span class="script">My</span> Perfidious pangram</p>
  </div>
  <input type="checkbox" name="checkbox1" id="checkbox1" value="on" checked />
  <label for="checkbox1">ä»£æ¿åå½¢ãæå¹ã«ãã</label>
</fieldset>

<fieldset>
  <legend><code>font-feature-settings</code> ããããã£ãä½¿ç¨</legend>
  <div class="container container2">
    <p><span class="script">My</span> Perfidious pangram</p>
  </div>
  <input type="checkbox" name="checkbox2" id="checkbox2" value="on" checked />
  <label for="checkbox2">ä»£æ¿åå½¢ãæå¹ã«ãã</label>
</fieldset>

@font-face {
  font-family: "Plex Serif";
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  src:
    url("https://mdn.github.io/shared-assets/fonts/plex/IBMPlexSerif-Regular.woff")
      format("woff"),
    url("https://mdn.github.io/shared-assets/fonts/plex/IBMPlexSerif-Regular.woff2")
      format("woff2");
}

@font-face {
  font-family: "Dancing Script";
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  src:
    url("https://mdn.github.io/shared-assets/fonts/dancing-script/dancing-script-regular.woff")
      format("woff"),
    url("https://mdn.github.io/shared-assets/fonts/dancing-script/dancing-script-regular.woff2")
      format("woff2");
}

body {
  font:
    1.2em "Plex Serif",
    "Times New Roman",
    serif;
  margin: 1rem;
}

.script {
  font-family: "Dancing Script", serif;
}

fieldset {
  margin-bottom: 1rem;
}

label {
  user-select: none;
}

.container > * {
  font-size: 4rem;
  margin: 1.5rem 0;
}

css

@font-feature-values "Plex Serif" {
  @styleset {
    alt-a: 1;
    alt-g: 2;
  }
  @stylistic {
    alternates: 1;
  }
}

@font-feature-values "Dancing Script" {
  @stylistic {
    alternates: 1;
  }
}

.container1 * {
  font-variant-alternates: styleset(alt-a);
}
.container1 .script {
  font-variant-alternates: stylistic(alternates);
}
.inactive.container1 * {
  font-variant-alternates: normal;
}

.container2 * {
  font-feature-settings: "ss01";
}
.container2 .script {
  font-feature-settings: "salt";
}
.inactive.container2 * {
  font-feature-settings:
    "ss01" 0,
    "salt" 0;
}

const checkBox1 = document.getElementById("checkbox1");
const checkBox2 = document.getElementById("checkbox2");
const container1 = document.querySelector(".container1");
const container2 = document.querySelector(".container2");

const toggleInactive = (checkBox, container) => {
  if (checkBox.checked) {
    container.classList.remove("inactive");
  } else {
    container.classList.add("inactive");
  }
};

checkBox1.addEventListener("change", () => {
  toggleInactive(checkBox1, container1);
});

checkBox2.addEventListener("change", () => {
  toggleInactive(checkBox2, container2);
});

ãã®å ´åã@stylistic(alternates) ã¯ãã©ã¡ãã®ãã©ã³ãã®ä»£æ¿æåããã¹ã¦è¡¨ç¤ºãã¾ããããã 'My' ã¨ããåèªã ãã«é©ç¨ããã¨ã'M' ã®ã¬ã³ããªã³ã°æ¹æ³ãå¤ããã@styleset(alt-a) ãé©ç¨ããã¨ãå°æåã® 'a' ã ããå¤ããã¾ãã

æ¬¡ã®è¡ã

css

font-variant-alternates: styleset(alt-a);

ãã®ããã«å¤æ´ãã¦ã¿ã¦ãã ããã

css

font-variant-alternates: styleset(alt-g);

å°æåã® 'a' ãæ¨æºå½¢ã«æ»ããå°æåã® 'g' ãä»£ããã«å¤åããã®ãåããã§ãããã

ä»£æ¿åå½¢ã®è©³ç´°

https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates

åå

é¢é£ããããããã£: font-variant-ligatures

<fieldset>
  <legend><code>font-variant-ligatures</code> ããããã£ãä½¿ç¨</legend>
  <div class="container container1">
    <p>Puffy Perfect -^ <-></p>
  </div>
  <input type="checkbox" name="checkbox1" id="checkbox1" value="on" checked />
  <label for="checkbox1">ååãæå¹ã«ãã</label>
</fieldset>

<fieldset>
  <legend><code>font-feature-settings</code> ããããã£ãä½¿ç¨</legend>
  <div class="container container2">
    <p>Puffy Perfect -^ <-></p>
  </div>
  <input type="checkbox" name="checkbox2" id="checkbox2" value="on" checked />
  <label for="checkbox2">ååãæå¹ã«ãã</label>
</fieldset>

@font-face {
  font-family: "Playfair Display";
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  src:
    url("https://mdn.github.io/shared-assets/fonts/playfair-display/playfair-display-regular.woff")
      format("woff"),
    url("https://mdn.github.io/shared-assets/fonts/playfair-display/playfair-display-regular.woff2")
      format("woff2");
}

body {
  font:
    1.2em "Playfair Display",
    "Times New Roman",
    serif;
  margin: 1rem;
}

fieldset {
  margin-bottom: 1rem;
}

label {
  user-select: none;
}

.container > p {
  font-size: 4rem;
  margin: 1.5rem 0;
}

css

.container1 * {
  font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
}
.inactive.container1 * {
  font-variant-ligatures: none;
}

/* 'liga', 'dlig', 'hlig', 'calt' */
.container2 * {
  font-feature-settings: "dlig", "liga", "calt";
}
.inactive.container2 * {
  font-feature-settings:
    "dlig" 0,
    "liga" 0,
    "calt" 0;
}

const checkBox1 = document.getElementById("checkbox1");
const checkBox2 = document.getElementById("checkbox2");
const container1 = document.querySelector(".container1");
const container2 = document.querySelector(".container2");

const toggleInactive = (checkBox, container) => {
  if (checkBox.checked) {
    container.classList.remove("inactive");
  } else {
    container.classList.add("inactive");
  }
};

checkBox1.addEventListener("change", () => {
  toggleInactive(checkBox1, container1);
});

checkBox2.addEventListener("change", () => {
  toggleInactive(checkBox2, container2);
});

ä½ç½®

é¢é£ããããããã£: font-variant-position

<fieldset>
  <legend><code>font-variant-position</code> ããããã£ãä½¿ç¨</legend>
  <div class="container container1">
    <p>Ups<span class="super">1</span> and downs<span class="sub">2</span></p>
  </div>
  <input type="checkbox" name="checkbox1" id="checkbox1" value="on" checked />
  <label for="checkbox1">ä½ç½®ãæå¹ã«ãã</label>
</fieldset>

<fieldset>
  <legend><code>font-feature-settings</code> ããããã£ãä½¿ç¨</legend>
  <div class="container container2">
    <p>Ups<span class="super">1</span> and downs<span class="sub">2</span></p>
  </div>
  <input type="checkbox" name="checkbox2" id="checkbox2" value="on" checked />
  <label for="checkbox2">ä½ç½®ãæå¹ã«ãã</label>
</fieldset>

@font-face {
  font-family: "Playfair Display";
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  src:
    url("https://mdn.github.io/shared-assets/fonts/playfair-display/playfair-display-regular.woff")
      format("woff"),
    url("https://mdn.github.io/shared-assets/fonts/playfair-display/playfair-display-regular.woff2")
      format("woff2");
}

body {
  font:
    1.2em "Playfair Display",
    "Times New Roman",
    serif;
  margin: 1rem;
}

fieldset {
  margin-bottom: 1rem;
}

label {
  user-select: none;
}

.container > p {
  font-size: 4rem;
  margin: 1.5rem 0;
}

css

/* position: normal|sub|super */
.container1 .super {
  font-variant-position: super;
}
.container1 .sub {
  font-variant-position: sub;
}
.inactive.container1 * {
  font-variant-position: normal;
}

/* 'subs', 'sups' */
.container2 .super {
  font-feature-settings: "sups";
}
.container2 .sub {
  font-feature-settings: "subs";
}
.inactive.container2 * {
  font-feature-settings:
    "sups" 0,
    "subs" 0;
}

const checkBox1 = document.getElementById("checkbox1");
const checkBox2 = document.getElementById("checkbox2");
const container1 = document.querySelector(".container1");
const container2 = document.querySelector(".container2");

const toggleInactive = (checkBox, container) => {
  if (checkBox.checked) {
    container.classList.remove("inactive");
  } else {
    container.classList.add("inactive");
  }
};

checkBox1.addEventListener("change", () => {
  toggleInactive(checkBox1, container1);
});

checkBox2.addEventListener("change", () => {
  toggleInactive(checkBox2, container2);
});

å¤§æå

é¢é£ããããããã£: font-variant-caps

<fieldset>
  <legend><code>font-variant-caps</code> ããããã£ã®ä½¿ç¨</legend>
  <div class="container container1">
    <p>
      <span class="small-caps">Small Caps</span> and
      <span class="all-small-caps">All Small Caps</span>
    </p>
  </div>
  <input type="checkbox" name="checkbox1" id="checkbox1" value="on" checked />
  <label for="checkbox1">å¤§æåãæå¹ã«ãã</label>
</fieldset>

<fieldset>
  <legend><code>font-feature-settings</code> ããããã£ã®ä½¿ç¨</legend>
  <div class="container container2">
    <p>
      <span class="small-caps">Small Caps</span> and
      <span class="all-small-caps">All Small Caps</span>
    </p>
  </div>
  <input type="checkbox" name="checkbox2" id="checkbox2" value="on" checked />
  <label for="checkbox2">å¤§æåãæå¹ã«ãã</label>
</fieldset>

@font-face {
  font-family: "Playfair Display";
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  src:
    url("https://mdn.github.io/shared-assets/fonts/playfair-display/playfair-display-regular.woff")
      format("woff"),
    url("https://mdn.github.io/shared-assets/fonts/playfair-display/playfair-display-regular.woff2")
      format("woff2");
}

body {
  font:
    1.2em "Playfair Display",
    "Times New Roman",
    serif;
  margin: 1rem;
}

fieldset {
  margin-bottom: 1rem;
}

label {
  user-select: none;
}

.container > p {
  font-size: 4rem;
  margin: 1.5rem 0;
}

css

/* position: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps */
.container1 .small-caps {
  font-variant-caps: small-caps;
}
.container1 .all-small-caps {
  font-variant-caps: all-small-caps;
}
.inactive.container1 * {
  font-variant-caps: normal;
}

/* 'smcp', 'c2sc' */
.container2 .small-caps {
  font-feature-settings: "smcp" 1;
}
.container2 .all-small-caps {
  font-feature-settings:
    "c2sc" 1,
    "smcp" 1;
}
.inactive.container2 * {
  font-feature-settings:
    "smcp" 0,
    "c2sc" 0;
}

const checkBox1 = document.getElementById("checkbox1");
const checkBox2 = document.getElementById("checkbox2");
const container1 = document.querySelector(".container1");
const container2 = document.querySelector(".container2");

const toggleInactive = (checkBox, container) => {
  if (checkBox.checked) {
    container.classList.remove("inactive");
  } else {
    container.classList.add("inactive");
  }
};

checkBox1.addEventListener("change", () => {
  toggleInactive(checkBox1, container1);
});

checkBox2.addEventListener("change", () => {
  toggleInactive(checkBox2, container2);
});

æ°å

é¢é£ããããããã£: font-variant-numeric

ãã©ã³ãã«å«ã¾ããæ°åã«ã¯ãããã¤ãã®ç¨®é¡ãããã¾ãã

'Lining' ã®æ°åã¯ãã¹ã¦åãé«ãã§ãåããã¼ã¹ã©ã¤ã³ä¸ã«ããã¾ãã
'Oldstyle' ã®æ°åã¯é«ããæ··å¨ãã¦ãããä»ã®å°æåã¨åæ§ã«ã¢ã»ã³ãã¼ã¨ãã£ã»ã³ãã¼ã®å¤è¦³ãæã¤ããã«ãã¶ã¤ã³ããã¦ãã¾ãããããã®æ°åã¯ãã¹ã¢ã¼ã«ãã£ããã¨åæ§ã«ãæ°åãå¨å²ã®åå½¢ã¨è¦è¦çã«èª¿åããããã«ãã³ãã¼ã¨ä¸ç·ã«ã¤ã³ã©ã¤ã³ã§ä½¿ç¨ãããããã«è¨è¨ããã¦ãã¾ãã

ãã®ããããã£ã§ã¯ã2 ç¨®é¡ã®åæ°ããµãã¼ãããã¦ãã¾ãã

æãã«åããããåæ°
åç´ã«ç©ã¿ä¸ããããåæ°

Lining ã¨ old-style ã®åå½¢

ä»¥ä¸ã®ã³ã¼ããããã¯åã® "Play" ãã¯ãªãã¯ããã¨ã MDN Playground ã§ä¾ãç·¨éã§ãã¾ãã

<fieldset>
  <legend><code>font-variant-numeric</code> ããããã£ã®ä½¿ç¨</legend>
  <div class="container container1">
    <p>
      <span class="lining">6,142</span> or <span class="oldstyle">6,142</span>
    </p>
  </div>
  <input type="checkbox" name="checkbox1" id="checkbox1" value="on" checked />
  <label for="checkbox1">æ°å¤ãæå¹ã«ãã</label>
</fieldset>

<fieldset>
  <legend><code>font-feature-settings</code> ããããã£ã®ä½¿ç¨</legend>
  <div class="container container2">
    <p>
      <span class="lining">6,142</span> or <span class="oldstyle">6,142</span>
    </p>
  </div>
  <input type="checkbox" name="checkbox2" id="checkbox2" value="on" checked />
  <label for="checkbox2">æ°å¤ãæå¹ã«ãã</label>
</fieldset>

@font-face {
  font-family: "Source Serif";
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  src:
    url("https://mdn.github.io/shared-assets/fonts/source-serif/SourceSerifPro-Regular.ttf.woff")
      format("woff"),
    url("https://mdn.github.io/shared-assets/fonts/source-serif/SourceSerifPro-Regular.ttf.woff2")
      format("woff2");
}

body {
  font:
    1.2em "Source Serif",
    "Times New Roman",
    serif;
  margin: 20px;
  padding: 0;
}

fieldset {
  margin-bottom: 1rem;
}

label {
  user-select: none;
}

.container > p {
  font-size: 4rem;
  margin: 1.5rem 0;
}

css

.container1 .lining {
  font-variant-numeric: lining-nums;
}
.container1 .oldstyle {
  font-variant-numeric: oldstyle-nums;
}
.inactive.container1 * {
  font-variant-numeric: normal;
}

.container2 .lining {
  font-feature-settings: "lnum" 1;
}
.container2 .oldstyle {
  font-feature-settings: "onum" 1;
}
.inactive.container2 * {
  font-feature-settings:
    "lnum" 0,
    "onum" 0;
}

const checkBox1 = document.getElementById("checkbox1");
const checkBox2 = document.getElementById("checkbox2");
const container1 = document.querySelector(".container1");
const container2 = document.querySelector(".container2");

const toggleInactive = (checkBox, container) => {
  if (checkBox.checked) {
    container.classList.remove("inactive");
  } else {
    container.classList.add("inactive");
  }
};

checkBox1.addEventListener("change", () => {
  toggleInactive(checkBox1, container1);
});

checkBox2.addEventListener("change", () => {
  toggleInactive(checkBox2, container2);
});

åæ°ãåºæ°ãã¹ã©ãã·ã¥ä»ãã®ã¼ã

ä»¥ä¸ã®ã³ã¼ããããã¯åã® "Play" ãã¯ãªãã¯ããã¨ã MDN Playground ã§ä¾ãç·¨éã§ãã¾ãã

<fieldset>
  <legend><code>font-variant-numeric</code> ããããã£ã®ä½¿ç¨</legend>
  <div class="container container1">
    <p>
      <span class="diagonal-fractions">3/16</span>, or
      <span class="ordinal">1st</span> of <span class="zero">0</span>
    </p>
  </div>
  <input type="checkbox" name="checkbox1" id="checkbox1" value="on" checked />
  <label for="checkbox1">æ°å¤ãæå¹ã«ãã</label>
</fieldset>

<fieldset>
  <legend><code>font-feature-settings</code> ããããã£ã®ä½¿ç¨</legend>
  <div class="container container2">
    <p>
      <span class="diagonal-fractions">3/16</span>, or
      <span class="ordinal">1st</span> of <span class="zero">0</span>
    </p>
  </div>
  <input type="checkbox" name="checkbox2" id="checkbox2" value="on" checked />
  <label for="checkbox2">æ°å¤ãæå¹ã«ãã</label>
</fieldset>

@font-face {
  font-family: "Source Serif";
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  src:
    url("https://mdn.github.io/shared-assets/fonts/source-serif/SourceSerifPro-Regular.ttf.woff")
      format("woff"),
    url("https://mdn.github.io/shared-assets/fonts/source-serif/SourceSerifPro-Regular.ttf.woff2")
      format("woff2");
}

body {
  font:
    1.2em "Source Serif",
    "Times New Roman",
    serif;
  margin: 20px;
  padding: 0;
}

fieldset {
  margin-bottom: 1rem;
}

label {
  user-select: none;
}

.container > p {
  font-size: 4rem;
  margin: 1.5rem 0;
}

css

.container1 .diagonal-fractions {
  font-variant-numeric: diagonal-fractions;
}
.container1 .ordinal {
  font-variant-numeric: ordinal;
}
.container1 .zero {
  font-variant-numeric: slashed-zero;
}
.inactive.container1 * {
  font-variant-numeric: normal;
}

.container2 .diagonal-fractions {
  font-feature-settings: "frac" 1;
}
.container2 .ordinal {
  font-feature-settings: "ordn" 1;
}
.container2 .zero {
  font-feature-settings: "zero" 1;
}
.inactive.container2 * {
  font-feature-settings:
    "frac" 0,
    "ordn" 0,
    "zero" 0;
}

const checkBox1 = document.getElementById("checkbox1");
const checkBox2 = document.getElementById("checkbox2");
const container1 = document.querySelector(".container1");
const container2 = document.querySelector(".container2");

const toggleInactive = (checkBox, container) => {
  if (checkBox.checked) {
    container.classList.remove("inactive");
  } else {
    container.classList.add("inactive");
  }
};

checkBox1.addEventListener("change", () => {
  toggleInactive(checkBox1, container1);
});

checkBox2.addEventListener("change", () => {
  toggleInactive(checkBox2, container2);
});

æ±ã¢ã¸ã¢ã®æå

é¢é£ããããããã£: font-variant-east-asian

<fieldset>
  <legend><code>font-variant-numeric</code> ããããã£ã®ä½¿ç¨</legend>
  <div class="container container1">
    <p>å è¦ æº¢ è¨ é°¯ å æ¬ å© å</p>
  </div>
  <input type="checkbox" name="checkbox1" id="checkbox1" value="on" checked />
  <label for="checkbox1">ç¹æ§ãç¡å¹ã«ãã</label>
</fieldset>

<fieldset>
  <legend><code>font-feature-settings</code> ããããã£ã®ä½¿ç¨</legend>
  <div class="container container2">
    <p>å è¦ æº¢ è¨ é°¯ å æ¬ å© å</p>
  </div>
  <input type="checkbox" name="checkbox2" id="checkbox2" value="on" checked />
  <label for="checkbox2">ç¹æ§ãç¡å¹ã«ãã</label>
</fieldset>

@font-face {
  font-family: "Kokoro";
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  src: url("https://mdn.github.io/shared-assets/fonts/kokoro/Kokoro.woff2")
    format("woff2");
}

body {
  font:
    1.2em "Kokoro",
    "Times New Roman",
    serif;
  margin: 20px;
  padding: 0;
}

fieldset {
  margin-bottom: 1rem;
}

label {
  user-select: none;
}

.container > p {
  font-size: 4rem;
  margin: 1.5rem 0;
}

css

.container1 * {
  font-variant-east-asian: normal;
}
.inactive.container1 * {
  font-variant-east-asian: jis78;
}

.container2 * {
  font-feature-settings: "jp78" 0;
}
.inactive.container2 * {
  font-feature-settings: "jp78";
}

const checkBox1 = document.getElementById("checkbox1");
const checkBox2 = document.getElementById("checkbox2");
const container1 = document.querySelector(".container1");
const container2 = document.querySelector(".container2");

const toggleInactive = (checkBox, container) => {
  if (checkBox.checked) {
    container.classList.remove("inactive");
  } else {
    container.classList.add("inactive");
  }
};

checkBox1.addEventListener("change", () => {
  toggleInactive(checkBox1, container1);
});

checkBox2.addEventListener("change", () => {
  toggleInactive(checkBox2, container2);
});

<fieldset>
  <legend><code>font-variant</code> ããããã£ã®ä½¿ç¨</legend>
  <div class="container container1">
    <p>Spiffy Plastic -> 3/4 time</p>
  </div>
  <input type="checkbox" name="checkbox1" id="checkbox1" value="on" checked />
  <label for="checkbox1">ç¹æ§ãæå¹ã«ãã</label>
</fieldset>

<fieldset>
  <legend><code>font-feature-settings</code> ããããã£ã®ä½¿ç¨</legend>
  <div class="container container2">
    <p>Spiffy Plastic -> 3/4 time</p>
  </div>
  <input type="checkbox" name="checkbox2" id="checkbox2" value="on" checked />
  <label for="checkbox2">ç¹æ§ãæå¹ã«ãã</label>
</fieldset>

@font-face {
  font-family: "Playfair Display";
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  src:
    url("https://mdn.github.io/shared-assets/fonts/playfair-display/playfair-display-regular.woff")
      format("woff"),
    url("https://mdn.github.io/shared-assets/fonts/playfair-display/playfair-display-regular.woff2")
      format("woff2");
}

body {
  font:
    1.2em "Playfair Display",
    "Times New Roman",
    serif;
  margin: 20px;
  padding: 0;
}

fieldset {
  margin-bottom: 1rem;
}

label {
  user-select: none;
}

.container > p {
  font-size: 4rem;
  margin: 1.5rem 0;
}

css

.container1 * {
  font-variant: common-ligatures discretionary-ligatures contextual
    diagonal-fractions;
}
.inactive.container1 * {
  font-variant: none;
}

.container2 * {
  font-feature-settings: "dlig", "liga", "calt", "frac";
}
.inactive.container2 * {
  font-feature-settings:
    "dlig" 0,
    "liga" 0,
    "calt" 0,
    "frac" 0;
}

const checkBox1 = document.getElementById("checkbox1");
const checkBox2 = document.getElementById("checkbox2");
const container1 = document.querySelector(".container1");
const container2 = document.querySelector(".container2");

const toggleInactive = (checkBox, container) => {
  if (checkBox.checked) {
    container.classList.remove("inactive");
  } else {
    container.classList.add("inactive");
  }
};

checkBox1.addEventListener("change", () => {
  toggleInactive(checkBox1, container1);
});

checkBox2.addEventListener("change", () => {
  toggleInactive(checkBox2, container2);
});

ä¸è¬çãªæ§æã¯æ¬¡ã®ããã«ãªãã¾ãã

css

.small-caps {
  font-feature-settings: "smcp", "c2sc";
}

css

.no-ligatures {
  font-feature-settings:
    "liga" 0,
    "dlig" 0;
}

'The Complete CSS Demo for OpenType Features' (can't vouch for the truth of the name, but it's pretty big)
A list of OpenType features on Wikipedia

ãã¹ã¦ã®ããããã£ãåçã«å®è£ããã¦ããããã§ã¯ãªãã®ã§ãCSS ãè¨å®ããã®ã«æ©è½æ¤åºãä½¿ç¨ãã¦æ£ããããããã£ãä½¿ç¨ã§ããããã«ããfont-feature-settings ãä»£æ¿ã¨ãã¦ä½¿ç¨ããã®ãããã§ãããã

css

.small-caps {
  font-feature-settings: "smcp", "c2sc";
}

@supports (font-variant-caps: all-small-caps) {
  .small-caps {
    font-feature-settings: normal;
    font-variant-caps: all-small-caps;
  }
}

é¢é£æå ±

The Complete CSS Demo for OpenType Features

Help improve MDN

Learn how to contribute

View this page on GitHub â¢ Report a problem with this content

OpenType ãã©ã³ãç¹æ§ã®æå¼ã

ãã©ã³ãã®ç¹æ§ã®æç¡ã®ç¢ºèª

ä½¿ç¨ããçç±

æã«ã¯ã¹ã¿ã¤ã«ã ãã§ãªãæ¬è³ªã«ãªããã¨ã

ãã©ã³ãç¹æ§

ã«ã¼ãã³ã°

ä»£æ¿åå½¢

ä»£æ¿åå½¢ã®è©³ç´°

åå

ä½ç½®

å¤§æå

æ°å

Lining ã¨ old-style ã®åå½¢

åæ°ãåºæ°ãã¹ã©ãã·ã¥ä»ãã®ã¼ã

æ±ã¢ã¸ã¢ã®æå

ãã©ã³ãã®ç°ä½åã®ä¸æ¬æå®

ãã©ã³ãç¹æ§ã®è¨å®

font-feature-settings ã®ã³ã¼ãã«ã¤ãã¦ããè©³ãã

CSS ã®æ©è½æ¤åºãå©ç¨ããå®è£

é¢é£æå ±

CSS ã® OpenType æ©è½ã® CSS ã«ããå®æ¼

ã¦ã§ããã©ã³ãè§£æãã¼ã«

W3C æ¨æº

ãã®ä»ã®æç®

Help improve MDN

OpenType ãã©ã³ãç¹æ§ã®æå¼ã

ä»£æ¿å­å½¢ã®è©³ç´°

Lining ã¨ old-style ã®å­å½¢

åæ°ãåºæ°ãã¹ã©ãã·ã¥ä»ãã®ã¼ã­

Help improve MDN

OpenType ãã©ã³ãç¹æ§ã®æå¼ã

ä»£æ¿åå½¢ã®è©³ç´°

Lining ã¨ old-style ã®åå½¢

åæ°ãåºæ°ãã¹ã©ãã·ã¥ä»ãã®ã¼ã