CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませて…
タグ
- すべて
- 2ch (129)
- 4sq (5)
- 5509 (4)
- 941 (30)
- @font-face (14)
- @supports (2)
- ABテスト (4)
- AI (8)
- AbemaTV (2)
- CSS (133)
- DNT (3)
- Design (154)
- GXR (8)
- HDR (2)
- LDR (83)
- LT (2)
- LeicaS (7)
- Less&SassAdventcalendar2011 (3)
- M8 (12)
- SEO (71)
- Snapchat (11)
- Tシャツ (3)
- UA (2)
- Usability (7)
- WAI-ARIA (4)
- WeChat (3)
- WebGL (11)
- a (5)
- aa (3)
- accessibility (18)
- adobe (10)
- ahk (4)
- akb48 (3)
- akiba (46)
- alt (3)
- amachang (3)
- amazon (9)
- ameba (2)
- amp (67)
- analytics (48)
- android (49)
- androidアプリ (21)
- androidサイト (17)
- animation (24)
- api (20)
- app_links (2)
- apple (6)
- application_cache (4)
- async (2)
- atomic design (3)
- audio (9)
- autocomplete (3)
- backblaze (3)
- background (7)
- background-size (2)
- bat (3)
- before (5)
- bem (2)
- best (8)
- beta (3)
- blink (6)
- blockquote (5)
- blog (21)
- book (20)
- bootstrap (2)
- border (5)
- border-radius (4)
- bot (7)
- box (9)
- box-shadow (9)
- bracket (2)
- browser (23)
- button (5)
- cafe (2)
- calc (2)
- camera (4)
- canonical (15)
- canvas (10)
- cg (6)
- chakuriki (19)
- checkbox (2)
- cho45 (4)
- chrome (70)
- cite (2)
- class (2)
- clearfix (5)
- clubhouse (2)
- color (15)
- comm (2)
- compass (2)
- content (2)
- cos (2)
- css2.1 (2)
- css3 (116)
- cssnite (9)
- csv (5)
- data (6)
- dataスキームuri (3)
- date (3)
- del.icio.us (2)
- dena (4)
- device-pixel-ratio (2)
- dialog (2)
- display (8)
- docs (3)
- dpi (2)
- dropbox (11)
- e-p1 (2)
- eames (2)
- editor (3)
- edo (13)
- epub (45)
- event (22)
- excel (5)
- extend (5)
- facebook (51)
- favicon (3)
- fez (17)
- figure (3)
- fileapi (4)
- filter (3)
- firebug (3)
- firefox (39)
- firefox4 (4)
- firefoxos (4)
- flash (6)
- flexbox (3)
- flickr (8)
- font (35)
- font-family (4)
- font-feature-settings (2)
- font-size (7)
- form (15)
- forms (8)
- game (28)
- gamification (172)
- geolocation (5)
- gif (2)
- git (29)
- github (13)
- glatyou (4)
- gmail (2)
- go (4)
- godox (3)
- google (82)
- googleglass (2)
- googlemap (2)
- gradient (19)
- grep (2)
- grunt (14)
- hack (4)
- hail2u (54)
- hamashun (33)
- hgroup (5)
- hipchat (2)
- hira (3)
- history (3)
- hitoyam (4)
- hoka (19)
- hrforecast (2)
- htaccess (4)
- html (24)
- html5 (323)
- html5 バリデータ (3)
- html5.1 (14)
- htmlメール (16)
- http (5)
- http2.0 (4)
- https (7)
- i18n (3)
- iOS (14)
- iOS9 (5)
- iPad (15)
- iPhone (46)
- iPhoneアプリ (45)
- iPhoneサイト (42)
- ia (2)
- icon (3)
- ie (32)
- ie10 (12)
- ie6 (4)
- ie8 (8)
- ie9 (10)
- iframe (8)
- img (12)
- indexedDB (4)
- input (8)
- instagram (32)
- ios6 (10)
- ios7 (10)
- javascript (98)
- jojo (3)
- jpg (3)
- jquery (66)
- jquery_mobile (14)
- kayac (8)
- kdp (71)
- kojika17 (3)
- konost (3)
- kotarok (8)
- layout (3)
- leica (25)
- lens (3)
- less (10)
- lifehack (9)
- lightroom (47)
- line (123)
- line@ (46)
- lineblog (5)
- line公式ブログ (7)
- link (3)
- livedoor (66)
- localstorage (4)
- longdesc (7)
- mac (54)
- main (8)
- mala (16)
- max-width (3)
- meta (13)
- meteor (3)
- meter (4)
- microdata (23)
- microformats (4)
- mmo (3)
- mobile (3)
- momdo (3)
- multi-column_layout_module (8)
- nabokov7 (5)
- narumi (3)
- naver (9)
- news (12)
- nhn (6)
- node.js (4)
- ogp (17)
- opera (3)
- outline (4)
- overflow (3)
- p9 (5)
- pc (30)
- photoshop (64)
- picture (10)
- pixiv (8)
- placeholder (7)
- plugin (4)
- png (6)
- position (3)
- profoto (3)
- progressiveenhancement (3)
- pv (3)
- raw (3)
- rdfa (3)
- responsive_web_design (22)
- retina (5)
- rfc (6)
- ruby (5)
- ruby要素 (11)
- sample (4)
- sao (4)
- sasakill (14)
- sass (63)
- sbm (3)
- scoped (7)
- script (3)
- sdカード (3)
- section (3)
- securecat (7)
- senna (5)
- sig (5)
- slide (119)
- sns (6)
- spdy (4)
- srcset (12)
- style (5)
- summaron (8)
- svg (21)
- table (7)
- tacamy (3)
- takazudo (19)
- template (3)
- text (9)
- text-shadow (12)
- time (7)
- titanium (7)
- to-r (27)
- tool (45)
- transform (10)
- transitions (7)
- tsubotax (5)
- tumblr (3)
- twitter (67)
- ui (88)
- unicode (4)
- url (5)
- ux (48)
- vant (47)
- video (14)
- viewport (10)
- vim (37)
- vmware (3)
- vps (6)
- vr (8)
- w3c (19)
- webcomponent (7)
- webfonts (25)
- webkit (6)
- websocket (15)
- whatwg (5)
- wifi (4)
- wiki (7)
- windows (9)
- work (4)
- wp (4)
- xd (3)
- xico (9)
- xss (11)
- yahoo (3)
- yomotsu (21)
- zen-coding (5)
- こもりまさあき (18)
- たにぐちまこと (4)
- まとめ (157)
- まどマギ (6)
- まめこ (6)
- わくてかラビット (3)
- アイコンフォント (3)
- アキバ (25)
- アドオン (11)
- アニメ (40)
- アリアハン (3)
- イラスト (7)
- インタビュー (4)
- インターネット (3)
- インテリア (71)
- インフォグラフィック (3)
- エクセル (40)
- エディタ (20)
- エヴァ (5)
- オフ会 (5)
- オンラインストレージ (4)
- カスタムdata属性 (3)
- カメラ (490)
- カメラバッグ (12)
- カラーマネジメント (3)
- キャッシュマニフェス (7)
- キャッチコピー (8)
- キーボード (14)
- キーワード (3)
- クリマ (6)
- グルメ (94)
- グロースハック (6)
- ゲーム (5)
- ゲームニクス (9)
- コスプレ (34)
- コミケ (25)
- コリス (110)
- サービス (4)
- シリアスゲーム (3)
- ジェネレータ (26)
- スイーツ (3)
- スキーム (3)
- スタジオ (18)
- ストラップ (3)
- ストロボ (31)
- スパム (3)
- スマートフォン (62)
- セキュリティ (17)
- ソーシャルゲーム (5)
- タイポグラフィ (9)
- チュートリアル (9)
- テンプレート (3)
- テンプレートエンジン (3)
- ディレクション (35)
- ディレクター (16)
- デスクトップ (11)
- ネタ (8)
- ハイパーローカル (9)
- バグ (3)
- バリデータ (4)
- パララックス (5)
- パン (4)
- パンくず (9)
- ヒーコ (3)
- ファッション (20)
- フィルム (4)
- フラットデザイン (6)
- フレームワーク (3)
- ブックマークレット (6)
- プリント (8)
- プルーヴェ (5)
- プレゼン (5)
- プロジェクトマネジメ (4)
- プロトタイプ (10)
- ベンダープリフィクス (6)
- ペルソナ (4)
- ポケモンGO (4)
- ポートレート (6)
- マイクロインタラクシ (4)
- マテリアル・デザイン (9)
- マネジメント (5)
- マネージメント (5)
- マンガ (9)
- マーケティング (150)
- ミツエー (13)
- メディアクエリ (10)
- メール (5)
- モニタ (9)
- モンハン (11)
- ヤスヒサさん (38)
- ユーザビリティ (3)
- ユーザーテスト (10)
- ヨッピー (3)
- ライカ (116)
- ライセンス (3)
- ライティング (12)
- ライブラリ (12)
- リサーチ (43)
- リセット (3)
- レシピ (10)
- レスポンシブ (32)
- レタッチ (23)
- レンズ (6)
- ロケタッチ (25)
- ロケーション (123)
- ローカルストレージ (16)
- ワイヤーフレーム (3)
- ワークフロー (5)
- 不動産 (6)
- 人材 (5)
- 仕事 (11)
- 仕事術 (9)
- 仕様書 (58)
- 企画 (6)
- 企画書 (6)
- 位置情報 (8)
- 停電 (5)
- 健康 (6)
- 写真 (297)
- 写真家 (21)
- 写真展 (14)
- 写真集 (11)
- 分散型メディア (7)
- 初音ミク (6)
- 動画 (34)
- 同人誌 (13)
- 名刺 (8)
- 名言 (6)
- 固定レイアウト (8)
- 壁紙 (26)
- 字幕 (3)
- 宮内庁 (3)
- 対話型UI (4)
- 就職 (5)
- 広告 (27)
- 引越し (3)
- 抹茶バアム本 (3)
- 拡張機能 (13)
- 撮影 (26)
- 文字コード (6)
- 文字参照 (5)
- 文房具 (5)
- 文章 (3)
- 料理 (4)
- 新海誠 (5)
- 旅行 (14)
- 日本 (6)
- 日本語 (7)
- 映画 (3)
- 書評 (3)
- 椅子 (18)
- 楽天 (6)
- 構図 (22)
- 正規表現 (6)
- 歴史 (5)
- 民族衣装 (3)
- 法律 (10)
- 渋谷 (6)
- 澤村徹 (19)
- 現像 (14)
- 生活 (15)
- 画像 (5)
- 病院 (6)
- 確定申告 (3)
- 神社仏閣 (3)
- 秋葉原 (6)
- 税金 (6)
- 素材 (18)
- 統計 (13)
- 絵文字 (5)
- 美術 (7)
- 艦これ (46)
- 英語 (5)
- 萌え (13)
- 著作権 (28)
- 言及感謝 (5)
- 読み物 (95)
- 調査 (9)
- 賃貸 (6)
- 速さ (36)
- 邦訳 (30)
- 隣のお姉さん (4)
- 雑貨 (13)
- 電子書籍 (27)
- 震災 (34)
- 顧客ロイヤルティー (3)
- カメラ (490)
- html5 (323)
- 写真 (297)
- gamification (172)
- まとめ (157)
- Design (154)
- マーケティング (150)
- CSS (133)
- 2ch (129)
- line (123)
font-familyに関するhama_shunのブックマーク (4)
-
hama_shun 2016/10/18
- slide
- font
- font-family
リンク -
hama_shun 2012/04/10
これ最近になってブクマしてる人、元記事読んでるのか気になるな。2010年の記事だから出演者のサイトでも変更しているところがあるし、コンテストの方は psd を見ると分かるけどデザインがメイリオで作られている
-
等幅フォントが使われる要素の扱いがブラウザー間でまちまちな問題
少し前にFixing browsers’ broken monospace font handlingをNice Web Type経由で読んだんだけど、「単純に初期設定が違うだけだろ……%指定すれば大丈夫じゃね？」とか高をくくってたら大間違いだった。font-size: 100%がうまく動かなかったり、pre要素はともかくcode要素辺りでの実装のずれとか、monospaceだけだとWebKitでおかしくなるバグとかも絡んできてかなりの魔窟のようだ。この記事では触れられていないけど、言語設定によって等幅フォントの初期サイズが違うこともあるので更なるカオス。 記事で最初に挙げられているコードでも良いのだけど、normalize.cssではこの問題への対処がちゃんとなされているので、細かいことは余り考えずにnormalize.css使うのが手っ取り早い。記事の最後に挙げられているコードのように
-
font-familyの指定はウェイトなしのアルファベット表記のみでほぼよさそう | Culture27
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; 同じフォントを日本語表記とアルファベット表記の両方で指定しているのは、各ブラウザの解釈や挙動が異なるなどの理由からです。ただ、最近のブラウザはどうなんだろうかとちょっと気になったので調べました。 結果としては下記の表になりました。詳細はデモページを見てください。 Parallels上のWin7: IE6-8(IE6,7はIETester), Chrome15, Firefox8, Safari5, Opera11 Mac OS X 10.6.8: Chrome15, Firefox8, Safari5, Opera11 文字コード: UTF-8 指定方法 IE Chrome Saf
-
1
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
処理を実行中です
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
設定を変更しましたx