はてなキーワード: Meiryoとは
Windows10 以降のWindowsに標準搭載されるようになった「UDデジタル教科書体」というフォントがある。游ゴシックに並んで書体が美しいフォントで、そこらへんのチラシや張り紙などで濫用されているのをよく目にするだろう。
だがUDデジタル教科書体はバリアントが6種類もあって、それぞれがどんなフォントなのかわかりにくい。Word でバリエーションを選ぼうとすると、一覧にはこんな風に並ぶ。
フォント名を単純に昇順で並べただけで、バリアント順になっていない。これでは何がなんだかわからないので整理してみよう。
| 書体名 | 和文 | 欧文 | ウエイト |
|---|---|---|---|
| UD デジタル 教科書体 N-R | 等幅 | 等幅 | 標準 |
| UD デジタル 教科書体 N-B | 等幅 | 等幅 | 太字 |
| UD デジタル 教科書体 NP-R | 等幅 | プロポーショナル | 標準 |
| UD デジタル 教科書体 NP-B | 等幅 | プロポーショナル | 太字 |
| UD デジタル 教科書体 NK-R | プロポーショナル | プロポーショナル | 標準 |
| UD デジタル 教科書体 NK-B | プロポーショナル | プロポーショナル | 太字 |
各バリアントは
という順列組み合わせになっていることがわかる。
日本語の文面は等幅フォントが読みやすく、英文・英単語はプロポーショナルフォントが読みやすいからだ（メイリオや游ゴシックなどもこの組み合わせである）。その組み合わせの NP ひとつでオールマイティにいける。
なお、和文に強いてプロポーショナルフォントを使う場面はなく、せいぜい見出しやタイトルなどの短いセンテンスや、UI部品のメニューなどスペースが限られる用途などに限定して使うべきだろう。
また、英語の等幅フォントも同様で、桁が揃っていないと見にくい表の数値や、プログラムのコードくらいしか一般的には使い道がない。
つまり「N」や「NK」の出番はほとんどないのである。（誤字訂正しました。指摘サンクス）
繰り返します。UDデジタル教科書体は NP-R/B 一択です。
ちなみに、はてな匿名ダイアリーをWindows環境で閲覧すると、本文の表示には「Meiryo UI」が使われています。この書体はOSのUI用に作られた省スペースフォントで、文字幅を強く圧縮した独特の形状をしています。ファイル名やメニュー項目を表示するには省スペースで重宝ですが、ブログの本文などの長文を表示するような用途にはまったく適していません。ごちゃごちゃと詰まっていてとても読みにくいです。こんなもの、普通は読みものコンテンツの最優先フォントに使ったりはしません。
なぜこんなことになっているのか、スタイルシートを読み解いてみましょう。
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Noto Sans JP", sans-serif;
まず先頭に "system-ui" という総称フォントが書かれているのが噴飯ものです。
総称フォントとは「指定された固有フォントがひとつも見つからなかった時に最後の手段として代替できるような一般名」のことで、本来はフェイルセーフとして font-family 値の末尾に書き添えます。ブラウザは総称フォントに対しては必ず何らかのフォントを割り当てていますから、どう転んでも何かのフォントは見つかり、最低限の表示が保証されるわけです。
ところがそれを先頭に書いたりしたら一発でフォントが見つかって、それ以降のフォント指定は読み飛ばされてしまいます。system-ui の後ろのカンマ以降の情報は実質的にただのゴミです。書く意味がありません。
なぜこんなスカタンなフォント指定になっているか、だいたいの想像はつきます。
このフォント指定は、MacOS付属の「San Francisco」という粋なフォントを呼び出す裏技として一部で流行していた方法なのです。すごく使いたかったんでしょうね、San Francisco を……。
しかしMacOS以外のOSでも、system-ui にはそのOS固有のフォントが割り当てられています。Windows の場合は長文の表示にまったく適さない Meiryo UI だった、というわけです。
どっちみち San Francisco は記事内の半角英数記号くらいにしか使われませんが、Windows の和文表示をすべて台無しにしてでもそうしたい何か強い理由があったんでしょうか。私には合理的な理由は思い当たりませんが。
別にFHDモニタでもいいからとりあえずMacTypeをgithubからインストールして有効化しろ
デフォ設定でかなり綺麗になる
WindowsのシステムフォントはnoMeiryoUIを使って源真ゴシックP Regular 10ptあたりにするといい
ブラウザはStylus入れてこんな感じでダサいフォントを潰してけ
/*--------------- sans serif ---------------*/ @font-face { font-family: "メイリオ"; src: local("源真ゴシックP Regular"); } @font-face { font-family: "Meiryo"; src: local("源真ゴシックP Regular"); } @font-face { font-family: "Meiryo UI"; src: local("源真ゴシックP Regular"); } @font-face { font-family: "ＭＳ Ｐゴシック"; src: local("源真ゴシックP Regular"); } @font-face { font-family: "MS PGothic"; src: local("源真ゴシックP Regular"); } @font-face { font-family: "MS UI Gothic"; src: local("源真ゴシックP Regular"); } @font-face { font-family: "YuGothic"; src: local("源真ゴシックP Regular"); } @font-face { font-family: "游ゴシック"; src: local("源真ゴシックP Regular"); } @font-face { font-family: "Microsoft Yahei"; src: local("源真ゴシックP Regular"); }
Windowsのフォントがクソ(日本語フォント編) │ ├┬ 標準搭載のフォントがクソ ││ │├┬ MS(P│UI)ゴシックがクソ │││ ││├── 埋め込みビットマップのせいで文字がガタガタ (アンチエイリアシング派) │││ ││├── ひらがなカタカナの横幅を縮めただけの妥協の産物 (MS UIゴシック否定派) │││ ││└── アウトラインも醜悪 (MSゴシック全否定派) ││ │├┬ メイリオがクソ │││ ││├── ヒンティングのせいで字体とバランスが崩れている (ヒンティング否定派) │││ ││├── 標準の行間がありすぎて扱いにくい (間延び行間否定派) │││ ││└── 字体が幼稚に見える (メイリオ全否定派) ││ │├┬ Meiryo UIがクソ │││ ││├── ヒンティングのせいで字体が崩れている (ヒンティング否定派) │││ ││└── かなとアルファベットの横幅を縮めただけの妥協の産物 (Meiryo UI全否定派) ││ │└┬ Yu Gothic UIがクソ │ │ │ ├── (初期Windows10で顕著)ヒンティング手抜きでバランス総崩れ (ヒンティング否定派) │ │ │ ├── 游ゴシックから横幅を縮めただけの妥協の産物? (Yu Gothic UI全否定派) │ │ │ └── Meiryo UIの方がまだ読みやすい (Yu Gothic UI否定・Meiryo UI消極的肯定派) │ ├┬ フォントレンダリングがクソ ││ │├┬ GDIとClearType │││ ││├── 埋め込みビットマップを優先するのがクソ (アンチエイリアシング派) │││ ││├── 縦方向のアンチエイリアシングがなく斜め線がガタガタ (アンチエイリアシング派) │││ ││├── 偽色出すぎ (ClearType否定派) │││ ││├── ヒンティングを無効化できない (ヒンティング否定派) │││ ││├── フォントサイズがおかしい。特に、ポイントが1.5の整数倍でない場合に顕著 (サイズ厳格派) │││ ││├── OpenTypeフォントのスムージングが薄すぎる (調整力不足派) │││ ││└── ClearTypeチューナー使っても線幅細すぎ、ガタガタすぎる (GDI,ClearType全否定派) ││ │└┬ DirectWrite │ │ │ ├── 基本的にヒンティングを無効化できない (ヒンティング否定派) │ │ │ ├── 調整できるはずなのに調整機能を用意していないアプリがある (調整力不足派) │ │ │ ├── OSの共通設定が存在しない (調整力不足派) │ │ │ └── 調整してもMacTypeに勝てない (MacType教) ......
くそつまんねえ！でもなんか知らんけど伸びるかも知れねえ！
伸びたら俺の勝ちだ！俺はやっぱり天才だ！
こんな無意味な形でなくて、ちゃんと人の役に立つことで俺は凄いと思いたいけど、出来ないからここにいる。
薬物中毒（アルコール・タバコを含む）になっていく人間の気持ちがわかる。
布団に入って夢に覚えれようとしても１００回に１００回自分がクズとしてフラフラしている夢しか見えれない。
夢の中でもクソ雑魚ナメクジなら、もうどうにかして酔っ払ってその間だけでも辛さを忘れるしかねえんだ。
俺の書くペン字はマジでミミズだヒエログリフが裸足で逃げ出す。
文字すらロクにかけねえんだな俺は。
俺さ、１００回に５回ぐらい音声言語がちゃんと言語として耳に入らねえんだ。
そうすると親も友人も同僚もなんでそんなことするんだと言ってくるんだ。
言っても分からねえだろうな。
俺の耳がポンコツだから文字を見ながらじゃねえとたまに言葉が頭に入らねえって。
それを誰も理解しねえんだ。
俺が優秀過ぎてそうなんじゃなくて俺が純粋に無能だからそうなんだ。
辛いよ。
生きてるだけで辛い。
それを誤魔化すために俺は無理にでもどこかで全能感を感じたくて、こんな所でこんな事してるんだ。
多分ランナーズハイと同じなんだろうな。
テンポよく同じことを繰り返しているとだんだんと自分が世界に溶けていって何も考えなくなってそれで楽になるんだ。
クズが開店セール中のパチンコ屋でギュウギュウ詰めになっているのと同じなんだよ。
とにかく世界に溶け込みたいんだ。
空っぽになりたいんだ。
アルコールを楽しめるやつが羨ましいよ。
こんな事しなくても簡単にどろどろに自分が溶けていくことが出来るんだからな。
そういやプラモ製作ってそういう意味では最高だよなラッカー塗料のシンナーを吸い込んで脳味噌とかしながらモクモクと単純作業をやりこんで最後は完成品を前に俺は天才だって叫ぶんだ。
でも俺はそんなことはしたくねえよやっぱシンナーは怖いからさ。
今気づいたんだけどよ世の中にある趣味って大部分が自分は何者かを忘れて熱中できることばかりだよな。
ネトゲでレイドボス倒している間は会社員である自分は消えて光の戦士達の闇の魔法使いになれるんだ。
それに気づくとなんだか悲しくなってくるなあ。
キャンプが趣味の森ガールだって森のなかで自分が何者かを忘れてモクモクと燃える松ぼっくりを見つめながらモクモクと自分が何者かをモクモクと煙に巻かれている瞬間に幸福を感じるんだ。
みんな自分が何者かなんて忘れてえんだ。
前に年下の知り合いに勧められて読んだラノベのボスキャラが人間は自分を見るのがたまらなく嫌だから目を逸らすからどうこうとかいう意味分からんスタンド使いだったんだがそれってマジかもな。
つらすぎる。
将棋をやりこんで頂点に上り詰めたやつも将棋盤の上でひたすら無意味なことを繰り返して自分を忘れて居続けたすぎてあそこまで行ったんだと思うと絶望しかねえな。
もうだめだよ俺はもう「マスタング」できねえよ。
ついさっきまで忘れてたんだけどよこの増田はもう表題と無関係なのかどうかがもうわからねえ。
とりあえず俺もいい加減疲れたからやめてえんだけどさ、書き終わった時に天才だって言えないと辛いだけだから切りが良い所を目指してえ。
助けてくれ。
とりあえず今はテンションをあげるためにpillowsを聞いてる。
本当はoasisとかが聞きたいんだけどな、英語の歌詞を聞いてるとこんな中学生レベルの英語も分からねえんだなって辛くなってしょうがねえから仕方なく日本語のロックを聞くんだ。
助けてくれ。
俺はどうすればいんだ。
もう無理だ。
天才だなんて一生思える気がしねえよ。
餓鬼の頃の俺は今経験している全てがいつか俺が生み出す大発明や大傑作のための糧になるって信じていた。
なんのために働いてるのかも分からねえけど右から左にエクセルとワードを流しながらたまにそれを印刷して印鑑押したり押してもらったりして何か知らんけど金を貰うんだ。
どこにも辿りつけねえよ。
疲れたよ。
俺はどうすればいんだよ。
今はもう無理だ。
こんだけ増田を書き続けているのにいつまで経っても脳汁が出てこねえよ。
酒が飲めたらなあ。
そしたら溺れるだけでいいのに。
ああそうだな。
駄目だった。
やっぱそうも思えねえわ。
俺はネガティブの天才にはなれねえし凡人の天才にもなれねえし無理だ。
もう諦めるわ。
時間も遅いしもう寝るわ。
絶望感がすごすぎてかえってよく寝れそうだわ。
助けてくれ、明日の俺、明日の俺には無理だろうし１０年後の俺にも無理だろうなあ。
もう駄目だよ。
誰かが突然すごい発明をしてなんかこう全てが突然すごくなってくれねえと無理だわ。
いっそすげー文明の発達した宇宙人が降りてきて俺たち全員家畜にしてくれねえかな。
ヤプー知ってるか？
知らない。
よっし俺の勝ちな。
弦楽バトルで勝ったぜー。
俺は天才だー……はぁ……
本家56.x、waterfox56.xでブックマークのみ字が滲んでイライラする件でusechrome.cssで
対応する対策を書いているサイトでよく上がっている「フォントをmeiryo uiにする」CSSをそのままでもよいが
游ゴシックを使いたい場合はYu Gothic UIを指定して、サイズを9から9.1にすると
殆サイズが変わらずに滲みが無くなった
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#bookmarksPanel, #history-panel {
font-size: 9.1pt !important;
font-family: "Yu Gothic UI" !important;
}
57.x以降は関係なし
----------------------------------------------------------------
追記
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
_________________ここから下は古い情報▼__________________________________________________
今、自分のブログをスクラッチしているので、こちらで。→2008/9/28 スクラッチ完了！BLACK-OUT.CSS公式ページ
作りました
要は、LynxのようなシンプルWebに世界がなればいいのになと思っている方。
そして、どんなサイトでも目線は左右に動かしたくない！スクロールは上下だけで済ませたい！
と、強く考えておられる方むけの情報です。
私はテキストブラウザのLynxを時々使っているのですが、これでサイトを見るとシンプルに見れるのですごく良いんですよね。
ただ、LynxはFlashとか画像が見れないし、マウスが使えないのはいざって時にちょっと不便。
で、Firefoxをテキストブラウザ化できないかなあと、ふと思いまして、思いつきで作ってしまいました。
私めもwebデザイナーやっとるんですが、上記のように、昨今のwebデザインなんて普段はなくていいって思っている奴でして。
仕事じゃ3カラムのサイトとか作りますが自分はそんなん好きじゃないです。色がサイトごとに違うってのも理解できない。
必要なのは情報であってデザイナーのデザインなんてどうでもいいんですよ。
そんな訳で、どんなサイトでもテキストブラウザ状態で閲覧できるFirefox用の拡張cssを作りました（やっつけだけど）。
ただ、ニュースサイトで画像が見れないと困る時もあるので、普段は小さなサムネイルで、カーソルを合わせた時だけ大きく表示されるようにしています。
＠このcssはコンセプト実証モデルです。思いつきで作ってるのでちょっと問題もあります。フィードバックとか意見など頂けると嬉しいかも。
＠将来的には、グリモンでjsも組み合わせてもっとコンソールのような感覚でブラウジングできるようにしたい
＠（参考用）私のよく見るサイト・・・ニコ動、wikipedia、スラッシュドットジャパン、2nn.jp（2ch）、mixi、はてなでホッテントリに上がっているブログ各種
ちなみに、こんなん使うな、既にこんないいのあるわいってのをご存知の方は教えてくれると嬉しいです。
それなりに探したのだけど、見当たらなくて・・・だから自作したので。
/* * ---------------------------- * black-out.css * author zamamin.com * build 2008.8.09 15:03 * version 0.0.31 * fix @namespaceを書いてなかったので追加 * ---------------------------- * */ @namespace url(http://www.w3.org/1999/xhtml); /* 全てのエレメントをリセット */ body,body * { background-image:none !important; background-color:#000 !important; border-color:#333 !important; text-decoration:none !important; color:#aaa !important; /*<- テキスト色 */ font-size:16px !important; /*<- 文字サイズ */ font-weight:normal !important; padding:0.15em !important; margin:0 !important; line-height:1.25em !important; text-align:left !important; text-indent:0 !important; font-family:Arial,Helvetica,Verdana,'ヒラギノ角ゴPro W3','Hiragino Kaku Gothic Pro',Osaka,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important; float:none !important; clear:both !important; position:relative !important; width:auto !important; height:auto !important; } body { background-color:#000 !important; padding:0.5em !important; } body * p, body * div, body * h1, body * h2, body * h3, body * h4, body * h5, body * h6{ margin-bottom:0.3em !important; float:left !important; clear:both !important; } /* リンク色 */ body * a, body * a *{ color:#a50 !important; } /* アクセス済みのリンク色 */ body * a:visited{ color:#a50 !important; } /* カーソルを合わせた時のリンク色 */ body * a:hover, body * a:hover *{ color:#0aa !important; background-color:#609 !important; } /* 画像は普段は小さくサムネイル表示。鬱陶しいので薄く表示 */ body * img{ opacity:0.3 !important; height:15px !important; width:15px !important; } /* 画像はマウスカーソルもっていけば原寸サイズになる */ body * img:hover{ opacity:0.9 !important; height:auto !important; width:auto !important; } button, input, select, option, textarea{ color:#f00 !important; padding:0.05em !important; height:auto !important; } /* テーブルのスタイル */ table{ border:none; } table td, table th{ border:none; border-right:1px dashed #999 !important; border-bottom:1px dashed #999 !important; } /* for 2ch（暫定） */ body * dt{ font-weight:bold !important; } /* 二コ動 */ embed#flvplayer{ height:540px !important; width:952px !important; }