hccbe フォント表示一覧

CSS
- CSSでフォントを指定する際には、font-familyにはfont nameではなくfont family nameを設定する。
- font family nameは各言語の名前でも設定できる。（メイリオ、細明體など）
- font-weight、font-style、font-stretchを合わせて設定すれば、font familyの中のフォントから適切なフォントが選ばれる。（Font Matching Algorithm）
Windows
- Windowsや.NETのAPI等が返すFamiliesの値は、CSSでのfont family nameと同一ではない。（System.Drawing.Text.InstalledFontCollection.Families等）※Mapping platform font properties to CSS properties
  - Windowsでフォントの一覧を取得する方法
    PowerShell
```
add-type -AssemblyName system.drawing
(New-Object System.Drawing.Text.InstalledFontCollection).Families
```
- コントロール・パネルのフォントがアイコンごとに表示するグループが、CSSでのfont family nameに近い。
  各アイコンの見出しがCSSでのfont family name（「Arial」等）とほぼ同一のもの
  日本語の名前がある場合、日本語のもののみ確認できる（「メイリオ」等）
  英字の名前を確認したければ、別途適切なプログラムを使用する必要がある
  font familyごとに束ねられたアイコンを開くと、同一font familyに属する各フォントがわかる
  各フォントをプレビュー表示すると、タイトル・バーにfont nameが表示される（「Arial Narrow Italic」等）
  この名前をCSSでのfont-familyに設定しない
Chromium
- Segoe UI Light（font-weight:200）、Segoe UI Semilight（同300）を区別できない。
- Eras Medium ITC（font-weight:500）、Eras Demi ITC（同600）を区別できない。
- TektonPro-BoldOblの幅がTektonPro-Boldより縮まない。（Adobeのフォントはおおむね縮む）
Edge
- Segoe UI Light（font-weight:200）、Segoe UI Semilight（同300）を区別できない。
  - font-familyにfont nameを設定できてしまうので、font-familyにSegoe UI LightやSegoe UI Semilightを設定すると区別できる。
Firefox
- TektonPro-BoldOblの幅がTektonPro-Boldより縮む。（Adobeのフォントはおおむね縮む）
Internet Explorer
- font-familyにfont nameを設定できてしまう。
  - font-familyにArial Rounded MT Boldを設定して、font-weightを700にすると、太字がさらに太くなってしまう。
- Segoe UI Light（font-weight:200）、Segoe UI Semilight（同300）を区別できない。
  - font-familyにfont nameを設定できてしまうので、font-familyにSegoe UI LightやSegoe UI Semilightを設定すると区別できる。
- AdobeのCJKフォント、小塚フォントの縦位置がずれる。
- TektonPro-BoldOblの幅がTektonPro-Boldより縮む。（Adobeのフォントはおおむね縮む）
Silk
- 内蔵するほとんどのフォントは適用されない。
その他
- 游フォントは、WindowsとMacでfont name、font family nameともに違う。

font name

font family name

CSS

Language

このWebブラウザーでの表示