Webページのテキストのフォントに BIZ UDゴシック BIZ UD明朝 を利用する - CSS
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";
プログラム例
コード
下記のコードを作成します。
.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;
}
<!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明朝" のフォントを利用します。
.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";
}
<!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の作業もする。
