Webページのテキストのフォントに BIZ UDゴシック BIZ UD明朝を利用する

Webページのテキストのフォントに BIZ UDゴシック BIZ UD明朝、プロポーショナルフォントのBIZ UDPゴシック BIZ UDP明朝を利用するコードを紹介します。

概要

Windows 10 October 2018 Update を導入すると、初期インストール状態で以下のフォントがインストールされ利用できます。

BIZ UDゴシック
BIZ UDPゴシック
BIZ UD明朝
BIZ UDP明朝

この記事では、BIZ UDゴシックや、BIZ UD明朝をWebページのテキストフォントとして利用するためのCSSのコードを紹介します。

書式

CSSのfont-familyで以下を指定します。

BIZ UDゴシック

font-family:"BIZ UDGothic";

BIZ UDPゴシック

font-family:"BIZ UDPGothic";

BIZ UD明朝

font-family: "BIZ UDMincho";

BIZ UDP明朝

font-family: "BIZ UDPMincho";

プログラム例

コード

下記のコードを作成します。

CssBizUDFont.css

.BizUDGothic {
  font-family:"BIZ UDGothic";
  font-size:18px;
}

.BizUDPGothic {
    font-family: "BIZ UDPGothic";
    font-size: 18px;
}


.BizUDMincho {
    font-family: "BIZ UDMincho";
    font-size: 18px;
}

.BizUDPMincho {
    font-family: "BIZ UDPMincho";
    font-size: 18px;
}

CssBizUDFont.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="CssBizUDFont.css" />
</head>
<body>
  <div class="BizUDGothic">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(BIZ UDゴシック)</div>
  <hr />
  <div class="BizUDPGothic">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(BIZ UDPゴシック)</div>
  <hr />
  <div class="BizUDMincho">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(BIZ UD明朝)</div>
  <hr />
  <div class="BizUDPMincho">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(BIZ UDP明朝)</div>
</body>
</html>

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
游ゴシック、游明朝と比較すると行の間隔のマージンが少ないです。また、半角英文字の文字幅がPフォントでは全角に近い文字幅になっていることが確認できます。

参考

OpenTypeのフォントでないため、font-feature-settings: "palt" を指定しても文字幅は変わりません。カーニングをする場合は"BIZ UDPゴシック", "BIZ UDP明朝" のフォントを利用します。

CssBizUDFontPalt.css

.CaptionText {
    margin-top:4px;
    font-family: "BIZ UDGothic";
    font-size: 0.75em;
    font-weight: 700;
}

.BizUDGothic {
  font-family:"BIZ UDGothic";
  font-size:18px;
}

.BizUDPGothic {
    font-family: "BIZ UDPGothic";
    font-size: 18px;
}


.BizUDMincho {
    font-family: "BIZ UDMincho";
    font-size: 18px;
}

.BizUDPMincho {
    font-family: "BIZ UDPMincho";
    font-size: 18px;
}

.BizUDGothicPalt {
    font-family: "BIZ UDGothic";
    font-size: 18px;
    font-feature-settings: "palt";
}

.BizUDPGothicPalt {
    font-family: "BIZ UDPGothic";
    font-size: 18px;
    font-feature-settings: "palt";
}


.BizUDMinchoPalt {
    font-family: "BIZ UDMincho";
    font-size: 18px;
    font-feature-settings: "palt";
}

.BizUDPMinchoPalt {
    font-family: "BIZ UDPMincho";
    font-size: 18px;
    font-feature-settings: "palt";
}

CssBizUDFontPalt.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="CssBizUDFontPalt.css" />
</head>
<body>
  <div class="CaptionText">font-feature-settings: "palt" なし</div>
  <div class="BizUDGothic">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(BIZ UDゴシック)</div>
  <div class="CaptionText">font-feature-settings: "palt" あり</div>
  <div class="BizUDGothicPalt">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(BIZ UDゴシック)</div>
  <hr />

  <div class="CaptionText">font-feature-settings: "palt" なし</div>
  <div class="BizUDPGothic">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(BIZ UDPゴシック)</div>
  <div class="CaptionText">font-feature-settings: "palt" あり</div>
  <div class="BizUDPGothicPalt">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(BIZ UDPゴシック)</div>
  <hr />
  <div class="CaptionText">font-feature-settings: "palt" なし</div>
  <div class="BizUDMincho">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(BIZ UD明朝)</div>
  <div class="CaptionText">font-feature-settings: "palt" あり</div>
  <div class="BizUDMinchoPalt">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(BIZ UD明朝)</div>
  <hr />
  <div class="CaptionText">font-feature-settings: "palt" なし</div>
  <div class="BizUDPMincho">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(BIZ UDP明朝)</div>
  <div class="CaptionText">font-feature-settings: "palt" あり</div>
  <div class="BizUDPMinchoPalt">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。(BIZ UDP明朝)</div>
</body>
</html>

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

掲載日: 2019-01-15

目次

Webページのテキストのフォントに BIZ UDゴシック BIZ UD明朝を利用する

概要

書式

プログラム例

コード

実行結果

参考

関連するページ

目次

Webページのテキストのフォントに BIZ UDゴシック BIZ UD明朝 を利用する

概要

書式

プログラム例

コード

実行結果

参考

関連するページ

Webページのテキストのフォントに BIZ UDゴシック BIZ UD明朝を利用する