フォント‐書体‐：CSSサンプル

該当するフォントが搭載されていない場合は、ブラウザが自動で代替えフォントを使用します。

MS UI Gothic Windows
ＭＳＰゴシック Windows
ＭＳゴシック Windows
メイリオ Windows
ヒラギノ角ゴ Pro W6 Macintosh
Osaka Macintosh
平成角ゴシック Macintosh

/* sans-serif */
 font-family: 
     'Verdana'   /* Win, Mac, iOS */
    ,'Courier'   /* Win, Mac, iOS */
    ,'Impact'   /* Win, Mac*/
    ,'Arial'   /* Win, Mac, iOS */
  ,'San Fransisco'   /* Mac, iOS */    ,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3'  /* Mac, iOS */
    ,'Tahoma'  /* Win, Mac */
    ,'Calibri'  /* Win */
    ,'Lucida Console'  /* Win */
    ,'Roman'  /* Win */
    ,'American Typewriter'  /* Mac, iOS */
    ,monospace;
    https://w3g.jp/sample/css/font-family#monospace
/* monospace */
  '',

フォントテストに使用するテキスト

I love NY
abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
12345678901234567890123456789
あかさたなハマヤラワゐゑ　薔薇

IPAゴシックは、情報処理推進機構（IPA）が公開しているIPAフォントの等幅フォントで、JIS X 0213:2004準拠です。
$ rm -r ~/.fonts/IPAfont00302
int i,j,k,l,o;    // 小文字のアイ、ジェイ、ケイ、エル、オー
int Ind[0];       // 半角のゼロ
i = 1;
for ( o=0; o < i; o++){     // オーはゼロからアイ未満
  console.log(eval('2 + 2') === eval('4'));   // expected output: true
  console.log(eval('2 + 2') === eval(new String('2 + 2'))); // expected output: false
}
Markdown（マークダウンは軽量マークアップ言語のひとつ）
    # 見出し１　　Japan
    ### 見出し３　Japon
    バッククォートで文字列を囲むことでコードの一部を表示可能です。 `gem install hoge` 
    > 引用
    > GitHub Flavored Markdown(GFM)はGitHubの独自仕様を加えたMarkdown記法。
    ~~取り消し線~~
cite="https://qiita.com/tbpgr/items/989c6badefff69377da7"
//34567890
var FontFamilyTester = {
  el: null,
  font_family: "'Times New Roman',Georgia,Serif",
  setFontFamily: function(font_family_str){
    var _cssv = getComputedStyle(this.el,'').fontFamily;
    this.el.style.fontFamily = font_family_str + "," + _cssv;
//34567890
  },
  _terminal: "FontFamilyTester の 終端じゃ"
};
  
  <comment> comment </comment>

font-family OS sample image

Courier

-	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	◎	◎	◎
和文	◎	？	✕	◎	✕

Courier New

-	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	◎	◎	◎
和文	◎	？	✕	◎	✕

Lucida Console

-	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	✕	✕	✕
和文	◎	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

'MingLiU'

-	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	✕	✕	✕
和文	◎	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

'ＭＳゴシック'

-	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	✕	✕	◎
和文	◎	？	✕	−	◎

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

'SimHei'

-	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	✕	✕	◎
和文	◎	？	✕	−	◎

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

'Small Fonts'

-	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	✕	✕	✕
和文	◎	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

'Terminal'

-	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	✕	✕	✕
和文	◎	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

Myrica

-	Win	Mac	iOS	Android	Chrome OS
欧文	○	？	✕	✕	✕
和文	○	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

’Myrica M’

-	Win	Mac	iOS	Android	Chrome OS
欧文	○	？	✕	✕	✕
和文	○	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

’Andale Mono’

-	Win	Mac	iOS	Android	Chrome OS
欧文	？	？	✕	✕	✕
和文	？	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

’AndaleMono’

-	Win	Mac	iOS	Android	Chrome OS
欧文	？	？	✕	✕	✕
和文	？	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

’Bitstream Vera Sans Mono’

-	Win	Mac	iOS	Android	Chrome OS
欧文	？	？	✕	✕	✕
和文	？	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

’Consolas’

-	Win	Mac	iOS	Android	Chrome OS
欧文	？	？	✕	✕	✕
和文	？	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

’DejaVu Sans Mono’

-	Win	Mac	iOS	Android	Chrome OS
欧文	？	？	✕	✕	◯
和文	？	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

’Dotum’

-	Win	Mac	iOS	Android	Chrome OS
欧文	？	？	✕	✕	✕
和文	？	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

’Lucida Sans Typewriter’

-	Win	Mac	iOS	Android	Chrome OS
欧文	？	？	✕	✕	✕
和文	？	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

’Monaco’

-	Win	Mac	iOS	Android	Chrome OS
欧文	？	？	✕	◯	✕
和文	？	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

’Monospace’

-	Win	Mac	iOS	Android	Chrome OS
欧文	？	？	✕	◯	◯
和文	？	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

’Noto Sans Mono’

-	Win	Mac	iOS	Android	Chrome OS
欧文	？	？	✕	✕	◯
和文	？	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

’Noto Sans Mono CJK JP’

-	Win	Mac	iOS	Android	Chrome OS
欧文	？	？	✕	✕	◯
和文	？	？	✕	−	◯

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

'OCRB'

-	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	✕	✕	✕
和文	◎	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

’OCR-B’

-	Win	Mac	iOS	Android	Chrome OS
欧文	？	？	✕	✕	✕
和文	？	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

’sans-serif-monospace’

-	Win	Mac	iOS	Android	Chrome OS
欧文	？	？	✕	◯	✕
和文	？	？	✕	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

’Source Code Pro’

-	Win	Mac	iOS	Android	Chrome OS
欧文	？	？	？	✕	✕
和文	？	？	？	−	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

ここから

MS UI Gothic

-	Win	Mac	iOS	Android	Chrome OS
欧文	○	ー	ー	ー	✕
和文	○	ー	ー	ー	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

Verdana

-	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	？	？	◎
和文	◎	？	？	？	✕

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

Impact

-	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	ー	？	✕
和文	○	？	ー	？	○

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

Arial

-	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	ー	？	◎
和文	◎	？	ー	？	◎

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

Consolas

-	Win	Mac	iOS	Android	Chrome OS
欧文	◎	ー	ー	？	✕
和文	◎	ー	ー	？	○

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

'San Fransisco','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3'

-	Win	Mac	iOS	Android	Chrome OS
欧文	○	？	？	？	✕
和文	○	？	？	？	○

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

Tahoma

-	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	？	？	○
和文	◎	？	？	？	○

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

monospace

-	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	？	？	◎
和文	◎	？	？	？	◎

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

ubuntu-mono

Adobe Fonts	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	？	？	◎
和文	◎	？	？	？	◎

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

source-code-pro

Adobe Fonts	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	？	？	◎
和文	◎	？	？	？	◎

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

courier-std

Adobe Fonts	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	？	？	◎
和文	◎	？	？	？	◎

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

fira-mono

Adobe Fonts	Win	Mac	iOS	Android	Chrome OS
欧文	◎	？	？	？	◎
和文	◎	？	？	？	◎

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

NanumGothic

-	Win	Mac	iOS	Android	Chrome OS
欧文	✕	？	？	？	◎
和文	✕	？	？	？	◎

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

Noto Color Emoji

-	Win	Mac	iOS	Android	Chrome OS
欧文	○	？	？	？	✕
和文	○	？	？	？	○

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

Noto Sans CJK JP

-	Win	Mac	iOS	Android	Chrome OS
欧文	○	？	？	？	◎
和文	○	？	？	？	◎

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

serif

All

abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
0123456789 \20,000- $200,000-
あかさたなハマヤラワ
div class="prettyprint" オーガスの窓

MS UI Gothic

ＭＳＰゴシック

ＭＳゴシック

メイリオ

ヒラギノ角ゴ Pro W6

Osaka

平成角ゴシック

ワープロやパソコン用向けにデザインされたフォント。Macintosh のOsakaの字母となっている。現在ではプロユースとして利用されている。

明朝体／ゴシック

フォントファミリー／ウエイトなど

font-family(総称ファミリ) sans-serif serif monospace fantasy（装飾的） cursive（手書き風/筆記体）

font-weight 2 100 (Ultra Light)(Thin) 200 (Thin)(Ultra Light) 300 (Light) 400 (Normal) 500 (Medium) 600 (Semi bold)(Demi bold) 700 (Bold) 800 (Black)(Ultra Bold) 900 (Ultra Bold)(Black)(HEAVY)

書体

MS UI Gothic

ＭＳ Ｐゴシック

ＭＳ ゴシック

メイリオ

ヒラギノ角ゴ Pro W6

Osaka

平成角ゴシック

明朝体／ゴシック

フォントファミリー／ウエイトなど

ＭＳＰゴシック

ＭＳゴシック