CSSで文字種ごとにフォントを変える (実例)

CSSに変数を使い、さらに文字種ごとにフォントを変えるということを別記事で書きました。

zauberer.hatenablog.com

こちらがそのStylish用CSSです。

@charset "UTF-8";

:root {--font-english: "AvenirNext LT Pro Regular";}

:root {--font-japanese: "さわらびゴシック";}

:root {--font-coding: "源ノ角ゴシック";}

/*──────────*/

body {
  font-family: var(--font-english), var(--font-japanese);
}

/*──────────*/

@font-face {
  font-family: "MS PGothic";
  src: local(var(--font-english));
  unicode-range: U+0000-007F;
}

@font-face {
  font-family: "MS PGothic";
  src: local(var(--font-japanese));
  unicode-range: U+0080-FFFF;
}

@font-face {
  font-family: "MS Pゴシック";
  src: local(var(--font-english));
  unicode-range: U+0000-007F;
}

@font-face {
  font-family: "MS Pゴシック";
  src: local(var(--font-japanese));
  unicode-range: U+0080-FFFF;
}

@font-face {
  font-family: "MS Pゴシック";
  src: local(var(--font-english));
  unicode-range: U+0000-007F;
}

@font-face {
  font-family: "MS Pゴシック";
  src: local(var(--font-japanese));
  unicode-range: U+0080-FFFF;
}

/*──────────*/

@font-face {
  font-family: "MS ゴシック";
  src: local(var(--font-english));
  unicode-range: U+0000-007F;
}

@font-face {
  font-family: "MS ゴシック";
  src: local(var(--font-japanese));
  unicode-range: U+0080-FFFF;
}

@font-face {
  font-family: "MS Gothic";
  src: local(var(--font-english));
  unicode-range: U+0000-007F;
}

@font-face {
  font-family: "MS Gothic";
  src: local(var(--font-japanese));
  unicode-range: U+0080-FFFF;
}

@font-face {
  font-family: "MS ゴシック";
  src: local(var(--font-english));
  unicode-range: U+0000-007F;
}

@font-face {
  font-family: "MS ゴシック";
  src: local(var(--font-japanese));
  unicode-range: U+0080-FFFF;
}

/*──────────*/

@font-face {
  font-family: "MS UI Gothic";
  src: local(var(--font-coding));
  /*src: local("Consolas");*/
  unicode-range: U+0000-007F;
}

@font-face {
  font-family: "MS UI Gothic";
  src: local(var(--font-coding));
  /*src: local("Meiryo UI");*/
  unicode-range: U+0080-FFFF;
}