webfont 表示例

OSにデフォルトで設定してあるようなフォントを一覧表示しています

!? 0123456789 ABCDEFEFG abcdefefghijk あいうえおかきくけこ生命体

http://www.fontsquirrel.com/tools/webfont-generator https://www.google.com/fonts/earlyaccess http://mplus-fonts.sourceforge.jp/
view source

JavaScript

$(function(){
  var e = {};
  var text = $('#text').text();

  var families1 = [
    'Impact',
    'Arial',
    'Tahoma',
    'Segoe UI',
    'ヒラギノ角ゴ Pro W3',
    'ＭＳ 明朝',
    'ＭＳ ゴシック',
    'MS PGothic',
    'MS UI Gothic',
    'メイリオ',
    'Meiryo',
    'sans-serif',
  ];
  var families2 = [
    'Noto Sans',
    'Noto Sans JP',
    'Jura',
    'Satisfy',
    'ZCOOL KuaiLe',
    'Roboto',
    'Kosugi Maru',
    'Sawarabi Mincho',
    'M PLUS 1p',
    'M PLUS Rounded 1c',
  ];

  var families = [];
  families = families.concat(families1).concat(families2);

  var demo = $('#demo');
  $.each(families, function(i,f){
    console.log(f);
    var cf = f;
    if(f.match(/ /)){
      cf = '"' + f + '"';
    }
    $('<p>')
      .text(text + ':' +f)
      .css({
        'font-family' : cf,
        lineHeight : '32px',
      })
      .appendTo(demo);
  });

  $('p')
    .on({
      'mouseenter': function(){
        $(this).css('font-weight', 'bold');
      },
      'mouseleave': function(){
        $(this).css('font-weight', 'normal');
      }
    });
});

CSS

body{
  font-size:24px;
}
a{
  display:block;
  font-size:12px;
  
}
@font-face {
  font-family: 'Noto JP Black';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/NotoSansJP-Black.otf) format('opentype');
}
@font-face {
  font-family: 'Noto JP Thin';
  font-style: normal;
  font-weight: 100;
  src: url(/fonts/NotoSansJP-Thin-Windows.otf) format('opentype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url(/fonts/Roboto-Black.ttf) format('truetype');
}
@font-face {
  font-family: 'MPlus';
  font-style: normal;
  font-weight: 100;
  src: url(/fonts/mplus-1c-black.ttf) format('truetype');
}

.noto{
  font-family: 'Noto Sans', serif;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-font/webfont/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。