• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• バックアップ を表示
• FrontPage/web へ行く。
  • 1 (2015-08-11 (火) 17:46:23)
  • 2 (2015-08-11 (火) 18:11:46)
  • 3 (2015-08-11 (火) 22:08:27)
  • 4 (2015-08-15 (土) 14:47:44)
  • 5 (2015-08-17 (月) 21:36:08)
  • 6 (2016-02-22 (月) 13:25:37)
  • 7 (2016-03-01 (火) 20:44:28)
  • 8 (2016-03-20 (日) 20:30:13)
  • 9 (2016-06-08 (水) 13:45:35)

*Web[#jca802d4]

** webフォント 「Noto Snas Japanese」 [#mb3a60ae]

#ref(notosansjapanese.jpg,,50%);
[[→無料の日本語フォント【Noto Sans Japanese】があまりにも美しいので、ブログに使ってみた>http://11neko.com/font-2/]]

[[→【Noto Sans Japanese】ブログの記事を綺麗なフォントで表示したいので最軽量化してみた>http://11neko.com/font-3/]]

cssファイルにgoogleからフォントをインポートします
style.cssに以下を追加

 @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

各要素にフォントを適応します(cssの最後に呼び出すとすべてに有効になると思います←確認様までに)

 *{
  font-family: 'Noto Sans Japanese', sans-serif;
  }

Noto Sans Japanesは細いとさらにカッコ良いので、適度にfont-weightを設定しておきます。

  *{
   font-weight: 100;
   font-weight: 200;
   font-weight: 300;
   font-weight: 400;
   font-weight: 500;
   font-weight: 600;
   font-weight: 700;
   font-weight: 800;
   font-weight: 900;
  }

** webフォント 「Source Code Pro」 [#y1619b6f]

#ref(s-sourcecodepro.jpg)

[[https://www.google.com/fonts#UsePlace:use/Collection:Source+Code+Pro ]]



 @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);

 *{ 
    font-family: 'Source Code Pro';
  }

** Webフォントの軽量化 [#z844ec10]
+ サブセットフォントメーカーのインストール
+ 第一水準漢字 のダウンロード
#ref(第一水準漢字.txt)

#ref(s-font_subset2.jpg,,)
サブセットメーカーを使って、フォントサイズを小さくする
#ref(s-font_subset1.jpg,,)
元の16MBから、圧縮後の-compだと、700KB程度に

使い方。(/fonts配下に設置した場合)
 @font-face {
    font-family: 'NotoSansCJKjp-Light';
    src: url('./fonts/noto.woff'),url('./fonts/noto.eot');
 }
 
 body {
    font-family: 'NotoSansCJKjp-Light';
 }