• ブログ
  • フリーフォント
  • 無料素材
  • ロゴデザイン
  • ショップ
  • ユーザー
  • お問い合わせ

デザインのブログ

フロップデザインのゆるく創作する個人BLOG

日本語ウェブフォントでサイトを明朝体表示。CSSフォント指定

2014年7月14日 by 加藤雅士

webfont-title

デザインにおいてフォントは重要です。
しかしウェブ上では日本語フォントはデフォルトのものか
画像に置き換えているのが現状です。
今回は、とくにウェブに向いていないと言われている
日本語ウェブフォントの「明朝体」でのデザインについて
無知なりに解説してみたいと思います。
ちなみに当ブログは「フロップデザインフォント」を使用してます。

webフォントとは、CSSで指定したフォントを表示する方法です。
閲覧者が指定したフォントを持っていなくても
制作者サイドでサーバーにアップしておけば表示可能になるのです。

しかし、これにはいくつか問題があります。
日本語フォントは容量が重いため表示に多少の問題がある。
サーバーにアップするという行為自体が禁止されている。
など実際にはいくつかの壁があります。

ただ今後はこれらの状況も変わってくると思います。

1.Winodws 8.1、OS X Mavericks(10.9)で游ゴシック体と游明朝体が
標準で搭載された。

2.フォントプラスなどのウェブフォントサービスの機能性・速度が
アップしてきている

ということで今までの明朝体を指定するときは
font-family:”MS P明朝”, “MS PMincho”, “ヒラギノ明朝 Pro W3”, “Hiragino Mincho Pro”, serif;

というのが普通でした。これは実際ほとんど使われていません。
これは単純に「MS P明朝」は多くの場合アンチエイリアスで表示されず
ガタガタで、しかも、それが読みにくいという現実が理由だと思います。
だったらサイトの雰囲気に合わなくてもメイリオを指定しておこうと
なるのもうなずけます。以下に今後オススメのCSS例を記述しました。

本文
font-family: “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “メイリオ”, Meiryo, serif;

見出し・タイトル(18pt以上)
font-family: “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “HG明朝E”, “メイリオ”, Meiryo, serif;

サンプル用に作ったページがこちらです。
https://webfontfan.com/mincho-font/
webfontcafe

説明すると、まず「MS P明朝」を外します。そして「游明朝」を入れます。
そして「游明朝」が表示されない人用に「メイリオ」をいれます。
見出しではWindowsユーザーの50%以上が持っているだろう「HG明朝E」
をいれます。(HG明朝は13pt以上でアンチエイリアス。太いので見出しに)
たぶん全体で70%くらいの人は明朝体で表示されないと思うのですが
通常使用している、いままでのゴシック体で表示されているので
問題は無いと思いますし、今後古いOSは減っていくので良いのではと思います。
(逆に100%の人に明朝体を表示させようと無理するのは現状では
デメリットの方が多いように思います)

というわけで、やっと本題の明朝体ウェブフォントの話です。
今回はワードプレスを使って日本語明朝体フォントを表示してみます。

今回は自作の日本語ウェブフォントキットを使用しました。
サンプル用に作ってのが以下のページです。
https://webfontfan.com/utsukushi/

webfontsample

ワードプレスのスタイルシートに以下の記述を行っています。

@font-face {
font-family: ‘utsukushiregular’;
src: url(‘https://あなたのアドレス/utsukushi.eot’);
src: url(‘https://あなたのアドレス/utsukushi.eot?#iefix’) format(‘embedded-opentype’),
url(‘https://あなたのアドレス/utsukushi.woff’) format(‘woff’),
url(‘https://あなたのアドレス/utsukushi.ttf’) format(‘truetype’);
}

次にフォントの表示として

font-family: ‘utsukushiregular’ , ‘游明朝’, YuMincho, ‘ヒラギノ明朝 ProN W3’ , ‘HiraMinProN-W3’ ,”メイリオ”, Meiryo, serif;

と表示しています。基本的にはこれぐらいなので
私のようなHTMLやCSSがほとんど分からない人でも
なんとか表示するくらいはできると思います。

もちろん、見出しやh1、h2などのみに適用することもできますし
日本語ウェブフォントキットの場合、「ひらがな」「カタカナ」など
よく使う文字のみの表示なので高速表示です。

とはいえWindowsXP以前や古いIEの問題が実は残っています。
そもそもアンチエイリアスで表示できないし困りものです。
というわけで、そういう場合はメイリオやMSゴシックで表示。
以下はゴシック体が代わりに表示された画面。
ie-windowsxp

実はウェブフォントに使っている「うつくし明朝体かな」は
ゴシック体とも相性が良いです。これも無しじゃないでしょう。

あと日本語ウェブフォントキットは
今後は続々と新作の追加もされます。
(フリー版より15%くらいは完成度が上がっています。
とくにSmartFontUIは別物といえるくらいに良くなっている。)
もちろんフロップデザインの全製品は永久アップデート無料です。

もうひとつおまけでWordpressを使っている人には
プラグインタイプでワンクリックでwebフォントを反映できる
うつくし明朝体WEBフォント(WPプラグイン)も発売中です。

いいね!:シェアする

  • Facebook
  • Twitter
  • メールアドレス
  • Tumblr
  • Pinterest
  • Pocket
カテゴリー: IT/インターネット, フォント・文字・ロゴ タグ: CSSフォント, CSSフォント指定, うつくし明朝体, ウェブフォント, サイト, 日本語ウェブフォント, 明朝体, 明朝体表示, 游明朝

アーカイブ

最近の投稿

  • 新作フォントのフルーツパーラーを公開〜大正レトロでかわいい
  • 新作フォントのモガを公開
  • あかずきんポップというフォントを公開
  • ビースト明朝をリリース
  • ソフトサラダのロゴをデザイナーとして観察してみた

人気の記事BEST10

  • 源界明朝は限界ギリギリ読める源ノ明朝の派生フリーフォント
  • 装甲明朝は源ノ明朝の派生フリーフォント〜ステンシル体風明朝体
  • ハロウィンなフォント図鑑 Helloween Font 日本語フォント編
  • アプリ明朝は源ノ明朝の派生フリーフォント〜横太明朝体
  • 平成最後のフォント〜300人みんなで作った記念書体
  • 新作フリーフォントRings of Saturn 綺麗で色気のある書体
  • デザイナーなら覚えておきたい欧文フォントBEST50〜トレンド書体
  • キュン死の日本語フリーフォントまとめ。ラブリー&キュートなバレンタイン気分のフォント達でかわいいを表現しよう。欧文フォントも
  • うつくし明朝体フォントは漢字も含まれる商用でも自由に使えるフリーフォント
  • Helveticaばかり使っていませんか?ヘルベチカとその周辺フォントまとめ

カテゴリー

  • (コミックエッセイ)デザイナーズ夫婦
  • IT/インターネット
  • アート・映像・漫画・アニメ
  • シルエット
  • デザイン・印刷・書籍
  • デザイン素材
  • フォント・文字・ロゴ
  • プライベート・イベント
  • 写真
  • 音楽

タグ

2016 2016年 2017 2018 2018年 2019年 font FREEFONT webfont Webフォント WordPress おしゃれ ななキュン ひらがな イラスト ウェブサイト ウェブフォント コミックエッセイ マンガ タイポグラフィ ダウンロード デザイン ネット フォント フリーダウンロード フリーフォント フロップデザイン フロップデザインフォント ブログ メイリオ ロゴ ワードプレス 公開 写植 同人誌 商用 年賀状 文字 新作フリーフォント 明朝体 書体 漫画 無料 無料ダウンロード 無料フォント 過去
ツイート
twittericon facebook facebook

商用・ロゴデザインに安心して使えるフォント製品の販売

フォントコレクション
ボリューム満点フォント集
フォントコレクション

みんなのフォント
手書き風フォント集
みんなのフォントPLUS

フォントスタイルズ
最先端欧文フォント
フォントスタイルズ

フォント物語
個性的な書体が勢揃い
フォント物語

日本語ウェブフォントキット
ウェブフォント集
日本語ウェブフォントキット

本丸ゴシック
本格丸ゴシック体
本丸ゴシック

フォントオノマトペ
擬音語・コミック書体
フォントオノマトペ

Copyright © 2021 デザインのブログ.

Omega WordPress Theme by ThemeHall

loading キャンセル
投稿を送信できませんでした。メールアドレスを確認してください。
メール送信チェックに失敗しました。もう一度お試しください。
このブログではメールでの投稿共有はできません。