CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませて…
モダン日本語フォント指定
CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませて…
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
2011年9月2日 CSS初心者から上級者まで頭を悩ませるフォント指定のベストプラクティスを模索してみた。 2014年4月28日追記： フォント指定に関する新しい記事を書きました。 CSSのfont-family指定に関する考察 2014年版 先日、CSSによるフォント指定について色々な人と話をする機会があり、せっかくなので、これまでの自分のやり方を、もう一度ゼロから考えなおしてみようと思い立った。 font-familyの指定を考察する CSSによるfont-familyの指定についての世間一般の見解を調べていると、非常に参考になる記事を発見！ font-familyはメイリオが先かヒラギノが先かという命題を本気で調べた 上記のウェビンブログ様の記事中に添付されている資料：日本のコーダーのfont-family指定が、非常に興味深い。これを見ると、ある程度経験のあるコーダーさんたちの中で
序 ウェブをブラウジングしていると、嫌というほど見る 無意味にひたすらシステムフォントを列挙している 同じシステム上に存在すると予想される和文フォントのあとに欧文フォントを指定する という苦痛極まりないフォント指定をしているCSSをよく見かける。 ひどい思考停止だと思うのだが、実際には行われているばかりか、ウェブデザイナーを自称する者が平気でそのような指定を推奨していたりする。 それについては散々言及したつもりでいたのだが、実際にChienomiでそのこと全体を指摘した記事はなかったので、ここでしっかりと述べておこうと思う。 ここではそれがなぜ、どのように問題なのか、どのようにすべきかということを述べていこう。 起 話の大本としては、MSNのフォント指定がひどくて、Linux上で見るために気を遣ったaliasを書かねばならないが、それ以上に無意味な指定である、ということを指摘した。 それ以
CSSでフォント指定する時の安全な記述方法、OSにプリインストールされているフォントのまとめ -CSS Font Stack
CSSでフォントの指定をする時、Windowsだとうまく表示されるけど、Macだとダメ、またその逆のケースもあります。 Webページやアプリでフォントを安全に使うためには、OSにインストールされているフォントを知ることです。 そのフォントがWindowsとMacにどれくらいインストールされているのか、CSSでフォントを指定する時どうすればいいのか、がまとめられたCCS Font Stackを紹介します。
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
WhatFont ToolはWeb上のテキストがどのフォントを使っているか調べるためのツールです。ブックマークレット、Google Chrome/Safari機能拡張があります。 Webサイトではあまりフォント指定が行われていません。それはローカルにフォントがあるかどうか分からないためです。しかしWebフォントを使えば問題はある程度解決します。そこでWebフォントが使われている現場でのフォントチェックに使えるのがWhatFont Toolです。 アイコンクリックで起動します。エスケープキーまたはExit WhatFontをクリックすると終了します。 フローティングでフォント名を表示します。 クリックするとフォントの詳細が表示されます。 右下にフォントの色が表示されます。 クリックするとRGB表示が切り替わります。 フォントの出元も表示されます。こちらはTypeKitから読み込まれたフォント
必要なCSSフォント指定を考えてみる 海外のWebサイトでは、Webフォントを用いることが常識化しています。GoogleフォントなどのWebフォントが無料で使用できることもあり、どのブラウザ、OSでも共通したフォントが使えるWebフォントはかなり価値があるものとして重宝されています。しかし、日本語におけるWebフォントの整備は、世界のフォント事情からするとかなり遅れており、トラフィックに応じた課金で使用するWebフォントが主流となっていることもあって、使用するにはハードルが高く、その他のいくつかの問題もあり、まだまだ、閲覧者のローカルでインストールされているフォントに頼らざるを得ません。 そこで、日本語を表現するCSSのfont-familyのあり方を 現在のWebブラウザやOSの標準フォントの現状を踏まえて再検討してみます。 font-familyで共通するものはないのか フォントをどう
デザインにおいてフォントは重要です。 しかしウェブ上では日本語フォントはデフォルトのものか 画像に置き換えているのが現状です。 今回は、とくにウェブに向いていないと言われている 日本語ウェブフォントの「明朝体」でのデザインについて 無知なりに解説してみたいと思います。 ちなみに当ブログは「フロップデザインフォント」を使用してます。 webフォントとは、CSSで指定したフォントを表示する方法です。 閲覧者が指定したフォントを持っていなくても 制作者サイドでサーバーにアップしておけば表示可能になるのです。 しかし、これにはいくつか問題があります。 日本語フォントは容量が重いため表示に多少の問題がある。 サーバーにアップするという行為自体が禁止されている。 など実際にはいくつかの壁があります。 ただ今後はこれらの状況も変わってくると思います。 1.Winodws 8.1、OS X Maveric
ホーム > Webマーケティング > ホームページ制作関連 > 2017年版個人的ベスト｜CSSフォント指定WIN、MACでキレイに表示（ゴシック、明朝） 公開日：2017年3月24日最終更新日：2019年4月14日 : ホームページ制作関連 WEB制作者として、頭を悩ます問題あるあるとして、フォント指定（文字）があります。 まったく同じホームページを見ていても、フォントが違うだけで見づらく感じることもあれば、高品質な印象にすることもできます。 Web上の情報伝達は、文字、デザインなど色や写真などを含めた全体でユーザーに伝えますが、その中でもまず始めに必要となるものが文字情報です。 どのような記述でフォントを指定すれば、WIN、MAC、スマホ、各種ブラウザで文字をキレイに表示させることができるのか、2017年現在の個人的なベストを考えてみたいと思います。
「メイリオとかいう汚いフォントで見たくない！」 「至高のフォント見つけたから使わせろ！」 そんな人々がいます。というか僕です。フォントの良し悪しなどわからないのにこだわっております。こだわってる割には無料フォントしか使ってないあたり厨二病らしいです。 当ブログはフォントを指定していません。うるさい人に怒られたくないからです。自己満足の塊みたいなフォント指定してるサイトをたまに見かけるんですが、フォントなんて好みですし押し付けるのもどうかなーと。 読みにくい文章もすこしは読みやすくなったかな。 それだけで記事が終わるのもなんですしほぼ無価値ですがシェアしときます。 <style type="text/css">html, body { font-family: sans-serif; } </style> これコピペして適応すればOK。headタグ以外にstyleタグが存在するのは嫌ですが僕
游ゴシック？ Noto Sans？ 久々に日本語フォント指定について考える - やっぱりWebが好き - Writing Mode
少しパラパラと文字間が開いた感じがするけれど、個人的に游ゴシックはとても好きな書体です。 游ゴシックはWindows 8.1とMac OS X 10.9（Marvericks）以降に標準搭載されており、このまま普及が進めばWebデザイナーにとってファーストチョイスのデバイスフォントとなるのでは。 というわけで、Writing ModeもこれまでのWebフォント使用をやめて、游ゴシックを基本書体にしてみました。 2014年もまもなく師走ですが、久々のWeb制作ネタです。 Writing Modeはリリース以来、モリサワのTypeSquareを利用してゴシックMB101を基本書体にしてきました。 TypeSquare［タイプスクウェア］ 日本語フォントは欧文フォントと違って、文字数が多くファイルサイズがとても大きくなります。そのため、TypeSquareのようなWebフォント配信サービスは、フ
font-family: Verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', osaka, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; 以下戦いの記録。 OSと戦う まずOSを上げるとすると、WindowsとMacintoshは当然外せない存在。他にも色々あるけれど、今回は敵を減らす為、WindowsとMacintoshおまけでLinuxをちょいす。 ブラウザと戦う 特筆すべきはSafariとMac IE5。まずSafariは、日本語を含むフォントを読み込まない為、アルファベット表記で指定する必要がある。そして、Mac IE5は第一候補で指定したフォントしか読み込まない（対象のフォントがインストールされていない場合はデフォルトフォント）。 以上をふまえた戦いの結果 Ver
スマートフォンを考慮したフォント指定の検討 | Web Tips
公開日：2014年8月22日 最終更新日：2019年3月25日 Webページで使用するフォントはCSSでfont-familyプロパティに指定します。PCサイトの場合はWindowsとMac OSを対象にしますが、スマートフォンで閲覧することも考え、iOSとAndroidも含めた指定を検討してみました。 欧文フォントだけを考えればいいのなら、Webフォントで対応することが現在は主流です。 しかし文字種類の多い日本語フォントが必要なサイトでは、どうしても端末にインストールされているデバイスフォントを使用せざるを得ません。 どういうデバイスフォントがインストールされているかは、端末により異なります。 MacとWindowsで共通しているフォントもありますが、デフォルトで使用するフォントは違いますので、Webページの表示を整えたいのならきちんと指定することが必要です。 スマートフォンまで考えたら
Illustrator CCで寸法線とかフォント指定などの情報をサクっと描けちゃうSpecctrが最強！｜DTP Transit
Illustrator CCで寸法線とかフォント指定などの情報をサクっと描けちゃうSpecctrが最強！ Fireworksの機能拡張として開発されていた「Specctr」（スペクター）が、なんとIllustrator CC対応になっています。 Specctrを使うことで次のことが可能になります（単位は選択している単位の種類に依存します）。 選択したオブジェクトの幅、高さを計測して寸法線として描画する 2つのオブジェクトの間隔を計測して寸法線として描画する オブジェクトを1つだけ選択しているときには、アートボードの上と左からの距離を計測して描画 選択したオブジェクトの塗りや線、不透明度などの情報を描画する 選択したテキストのフォント、フォントサイズ、塗りなどの情報を描画する Web制作を行われている方なら説明不要だと思いますが、カンプなどを作成するとき、ビジュアルデザイナーからコーダーへの
鷹野雅弘（Masahiro Takano） 株式会社スイッチ 目次 フォント指定 MACに「ＭＳ Ｐゴシック」？ ここまでのまとめ フォントサイズ 印刷用に表示 作成日:2008年2月7日 ユーザレベル:初心者, 中級 製品:Dreamweaver CS3 この記事では、Adobe® Dreamweaver® CS3を使ってフォントやフォントサイズの指定を行う方法と、OS/ブラウザでの対応についての実験をご紹介します。 必要ソフトウェア この記事では、以下のソフトウェアを使用しています。 Dreamweaver CS3 体験版 購入 Dreamweaverで、CSSを使ってフォント指定を行う際、迷わず「ＭＳ Ｐゴシック, Osaka, ヒラギノ角ゴ Pro W3」を指定している方が多いのではないかと思います。 これは「ＭＳ Ｐゴシック」がなかったら「Osaka」、「Osaka」がなかった
iBooks用のePub作成覚え書き（ePub3.0とかフォント指定とか） | 高橋文樹.com | デザイン
この投稿は 12年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 ePub3 on iBooks 最近めっきりePubを触っていなかったのですが、iOS5.0になってからCSS3のサポートが目覚ましく、ePub3.0の対応も縦書き時のページングさえ除けば概ね満足できるレベルまで来たので、拙著『ハムスターに水を』をePub3.0対応にしてみました。以下、その雑感です。 iBooks日本語組版対応でイケてる内容 iOS4の時点で「駄目だコリャ」と思ったていたものが改善されたケースが以下になります。 ルビ対応 これが今回個人的に一番重要だったものです。あくまで小説家としての意見ですが、ルビというのは見映え（ルビなんてカッコで書いときゃいいじゃん）やアクセシビリティ（低年齢向けに難しい感じは読みがなが振られるべき）の観点とは別に、「ルビそのものが表
CSSのWebフォント指定に関する考察 2016年版 | ブログ | 静岡県のホームページ制作 | 6666666 セブンシックス
ここ数年で、ウェブフォントを利用するサイトを目にする機会が多くなってきました。今ご覧になっているセブンシックスのサイトも、2016年2月時点ではウェブフォントを利用しています。ウェブフォントの指定方法に関する記事はいたるところで見かけますので、そこに書かれている通りにやれば問題ありません。でも、ウェブ制作者たるもの、言葉ではなく心で理解する必要があります。丁度、2016年1月にIE8のサポートが切れましたので、ここらで一回、CSSのウェブフォント指定についてきちんと考えてみたいと思います。 ウェブフォント指定の2ステップ ウェブフォントの指定方法はカンタンです。 CSSの@font-faceルールを使って新しいfont-familyを定義する。 ウェブフォントを適用したい箇所に新しく定義したfont-familyを指定する。 上記のたった2ステップです。具体的なCSSの記述は以下のようにな
必要な言語でWEBサイトを制作する フランクフルトは10人に1人は移民と言われるぐらい各国の移民が多く暮らす国際的な都市です。制作時のヒアリングの際、お客様も日本人だけではなく、各国のお客様がいるということで、「銀座マツナガ フランクフルト様」のサイトでは以前、 日本語 ドイツ語 英語 中国語 の4言語のページを作成しました。 毎月のアクセス解析レポートとヒアリング 銀座マツナガ フランクフルト様のサイトをオープンした2013年末から毎月アクセス解析をして、どのサイトから、どんなキーワードで、どのページが…など情報を調べて、キャンペーン等のアドバイスを行っています。 ヒアリングの際に「最近韓国人のお客様がくるようになった」とお聞きし、韓国語サイトを提案し、4月に制作をしました。 韓国語ページ：「긴자 마츠나가」 프랑크푸르트∙함부르크 일본인 미용실 その際にサイトに表示するフォントはどれ
昨日のエントリーに引き続き、実験です。以下、皆さんのブラウザではどのように見えますでしょうか？（私のココログはこの本文である".content p"に'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3'を指定しているので、それの影響を受けている可能性があります） serif sans-serif 'ＭＳ 明朝' 'ＭＳ Ｐ明朝' 'ＭＳ ゴシック' 'ＭＳ Ｐゴシック' 'Hiragino Mincho Pro' 'Hiragino Mincho Pro W3' 'Hiragino Mincho Pro W6' 'ヒラギノ明朝 Pro' 'ヒラギノ明朝 Pro W3' 'ヒラギノ明朝 Pro W6' 'Hiragino Mincho Pro'(font-weight:bold;) 'Hiragino Mincho Pro W3'(font-weight:b
font-family決定版。最新のフォント指定の仕方【游ゴシック】WEBのフォントの話 | 人材採用の総合広告代理店 インビジョン株式会社
WinでもMacでも標準搭載、font-familyには見やすく美しい「游ゴシック」を指定！2016/2/15 (Mon) font-family決定版。最新のフォント指定の仕方【游ゴシック】WEBのフォントの話 WinでもMacでも標準搭載、font-familyには見やすく美しい「游ゴシック」を指定！ 今までWEBのフォントの話として、WEBフォントの利便性や使い方についてまとめさせて頂きました。 優秀！有能！「WEBフォント」って？【メリット６つ】WEBのフォントの話 超★簡単。１分でできる！WEBフォントの使い方【GoogleFonts】WEBのフォントの話 今回は、 font-familyで指定する際の、ベストな方法 を考えます。 CSS「font-family」のベストとは！ さて、結論からお伝えすると… font-family:"游ゴシック", YuGothic,
2009年12月10日 サイト制作時のフォント指定の総集編2009冬。 【2010.2.28追記】cssのフォント指定を完璧にするぜ2010 Spring with jQueryという記事を新しく書いたので、そちらもぜひ！ 面倒が嫌いな人は以下をコピペで h1,h2,h3,h4,h5,h6 { font-size: 100%; } body { font-size: 62.5%; font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; line-height: 1.8; } 普通は、これで十分です。 ここから先が本番です cssでのフォント指定は、非常に難しい。ウェブ上でのフォントは、印刷物とは違い、見る人の環境に左右され、その環境も千差
2010年2月28日 jQueryを使って、シンプルにcssでのフォント指定関連の問題を解決しました。 以前、cssのフォント指定を完璧にするぜ2009 winterという記事を書きましたが、JavaScriptを使えば、もっとシンプルに指定できると思いつきました。こういった試行錯誤は、とても楽しいですね。 フォント指定のコード 2010 Spring <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ if($.browser.msie){ $("body").addClass("msie"); } if (navigator.platform.indexOf("Win") != -1) { $("body").addClass("wi
フォント指定はコレで決まり！僕の考える最高のfont-family(CSS)-2014年 - P N R A
どーも＠PNRAです！ 今日は弊社がオススメするフォント指定について話をしていきたいと思います。 ホームページ作成において、フォントが持つ印象はウェブサイトの印象を大きく左右します。特に欧文書体（英字）と異なり和文書体（日本語）は、デフォルト設定のフォント数の制限が多く、デザインの幅がどうしても狭まってしまいます。またウェブフォントを利用するという方法もありますが、読み込み速度を考えるとあまり使いたくないというのが弊社としての意見です。 そこで標準搭載されているフォントの中から、「これが最高じゃね？」と考えるフォントの指定についてを記載していきたいと思います。 フォントの指定に関してはIEというのが正直ネックで更に制限をかけていたのですが、少し前にWindows XPのサポートが終了したことで、IEの主流はバージョン8以降となりました。（心からありがたい） ということで、具体的に見ていきた
CSSのfont-family指定の前知識とその問題点 【読みやすいフォント指定】投稿 : 2013-01-26更新 : 2013-11-10 font-family指定に必要な最低限の前知識をもって、すでに分かっている問題点を知ったうえで、サイトの運営者が考えて決めればよいでしょうというが、本記事の内容です。 前知識１：font-family指定は、前から順番に適用される 例1:font-family：日本語フォントA,日本語フォントB 表示するパソコンにないフォントを指定された場合は、その次に書いているフォントが採用されます。日本語フォントAがない場合は、次の日本語フォントBで表示しようとするわけです。 例２:font-family：欧文フォントA,日本語フォントB 半角アルファベットの場合は、欧文フォントで表示される。 日本語（全角文字）の場合は、欧文フォントAには含まれていないので
iPadで「ヒラギノ明朝」フォント指定の記述方法
iPhoneにはインストールされていませんでしたが、iPadには「ヒラギノ明朝」がプリインストールされています。ウェイトは「W3とW6」の２種類。CSSを使用しての指定方法は下記です。 font-family : 'HiraMinProN-W3' ; font-family : 'HiraMinProN-W6' ; 最近購入した一冊。今迄専門書が少なかった欧文組版に関して解説されている書籍です。欧文の組版に関しては日本人なので不安な所だらけでした。最近少しづつ読んでいます。目から鱗の一冊です。 【内容紹介】『欧文書体』『欧文書体2』に続く、「タイポグラフィの基本BOOK」シリーズ第三弾。デザイナー、編集者、企業担当者向けに、実務的な欧文の組み方を指導した本。 実際にコンピュータ上で欧文を組んでみる練習問題や、欧文を組むときの具体的な19の注意事項などを掲載。 amazon.co.jpで
ブログの標準フォントサイズを小さくしてはダメな件とフォント指定のあり方（レスポンシブウェブデザイン） - retireSakiの日記
さまざまなブログを読んでいると、異常にフォントサイズが小さくなっている記事を見かけませんか？！ ブラウザーのフォントサイズは、読者自身の環境で読みやすいサイズに設定している場合が多いです。 そんなところをCSSなどで記事本文の標準フォントサイズを小さくしたら？！ 私が見つけたブログで一番小さかったものは、《これくらい》でした。 デザインテーマ自体がそうなっているか、フォントのネスト指定で小さくなってしまったのだと思いますが...目の良い方は別にして、読みづらいですよね！ 目がショボショボしてきますw 記事作者自身の環境は別にしても、読み手のブラウザーは違うサイズ設定をしていることを大前提とする必要があります。 目が良い人も悪い人も悪い人もいます。 読み手はブラウザーの設定を自身の読みやすいサイズを標準設定にしています。 ブラウザーの標準サイズのフォントサイズを12ptにしている人がいれば、
vimエディタで印刷自由自在 -フォント指定-
明けましておめでとうございます。 年が変わっても変わり映えしない当サイトへようこそ。 今日はvimエディタにおける印刷についての話題を採り上げることにします。 下のコマンドを入力すると、現在のバッファの内容を印刷することができます。 :hardcopy Windowsの場合は、上のコマンドを入力すると 印刷用のダイアログが開かれると思います。 この時、印刷するプリントのフォントは、printfontで指定することができます。 :set printfont=印刷に使いたいフォント 設定例としては、このようにします。 この設定は事前にvimエディタの設定ファイルに設定しておくか、印刷実行時に指定することになるでしょう。 :set printfont=ＭＳ_ゴシック:h12:cSHIFTJIS ところで、今回のフォントや、ヘッダー、フッダーといった印刷関係の設定は、印刷実行時に、設定する値を調節
本日、はてなの各サービスで本文(body)に対するフォント指定を追加いたしました。 これまでサービスによってはフォントの指定が適切に行われておらず、たとえばIEから閲覧した場合にアルファベットがserif(times new roman)で表示され、視認性が低いといったことが指摘されておりました。またサービス間で使用するフォントがこれまではばらばらで統一されていませんでしたが、本日のロゴリニューアルとともにはてなのサービス全体で使用するフォントを統一することで、どのサービスを使っていても「はてな」をイメージしていただきやすくなったかと思います。 具体的な変更点として、はてなのサービスページ全体(ユーザー自身がスタイルシートを変更できるページは除く)で、bodyに対して以下のfont-familyの指定を追加しております。 body { font-family: "arial", sans-
CSSのフォント指定見直した
CSSのfont-family、人によって書き方違うからなかなか参考にしづらい。この前読んだ記事が素晴らしく、これパクっとけば2014年は乗りきれるなと思ったのでご紹介します CSSでのフォント指定について考える（2014年） - DTP Transit コードfont-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; これ。以下解説。 欧文書体を先に書く基本的なことだけど、欧文書体を先に書くと、アルファベットや数字は欧文書体になり、欧文書体が持っていない漢字/カタカナ/ひらがなは和文書体で表示できる。なのでまず欧文書体を先に書く。参考リンクはVerdanaを指定して
CSSのフォント指定見直した
CSSのfont-family、人によって書き方違うからなかなか参考にしづらい。この前読んだ記事が素晴らしく、これパクっとけば2014年は乗りきれるなと思ったのでご紹介します CSSでのフォント指定について考える（2014年） - DTP Transit コードfont-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; これ。以下解説。 欧文書体を先に書く基本的なことだけど、欧文書体を先に書くと、アルファベットや数字は欧文書体になり、欧文書体が持っていない漢字/カタカナ/ひらがなは和文書体で表示できる。なのでまず欧文書体を先に書く。参考リンクはVerdanaを指定して
ホームページを制作するときに悩むことが多いのがフォントファミリーの指定方法。ウェブフォントが使われる機会も多くなって、ウェブサイトのフォント表現の幅も広がりました。 使われるフォントも時代によってトレンドがあったり、OSやブラウザのバージョンアップによって使われるフォントも変わったりします。 この記事ではサイトのfont-familyについて最新状況を改めて調べてみてまとめました。 画像や写真、広告で使われているフォントを調べる方法 街で使われているフォントをスマホで撮影して、または画像をアップロードして使われているフォントを検索できるサービス。英語・日本語対応もまとめています。 >> 画像・写真から使われているフォントを調べる方法5つ
flash.text.engine系はフォント指定しないと危険 !? | (SCRATCHBRAIN.BLOG v2)
Web Premium をインストールして本格的にFlash CS4。ここのところ、縦書きを使うものを作っていたので、その過程で出てきたことを、ひとつ。 Flash Player 10 になって、ActionScript 3.0でテキスト表示をするには、2つの方法が用意されている（flashx.textLayout系もあるけど）。 1.flash.text系（TextFieldクラス）を使う 2.flash.text.engine系を使う flash.text系はこれまでもあったやつなので最後に少し触れるだけにして、flash.text.engine系の話。 flash.text.engine系は、ただテキストを表示するだけでも結構まどろっこしい。 少しでも単純にするために、縦書きじゃなくて、横書きで考えてみる。 次のようなことをしたかった場合。 TextFieldでいいじゃん、と思
[CSS] CSS Font Stack – CSSによるフォント指定の補助ツール Pocket Tweet CSSでフォント指定する時に使うfont-familyプロパティの記述を簡単に生成してくれるオンラインツール。「Copy to Clipboard」ボタンをクリックするだけで、指定内容の記述がクリップボードに入ります。後はCSSファイルにペーストするだけ。多数の欧文フォント指定があらかじめ用意されていて、Sans Serif, Serif, Slab Serif, Monospacedとそれぞれカテゴリーに分けられて整理されてます。欧文フォントに限定はされますが、なかなか便利かつシンプルなツール。 CSS Font Stack
San Franciscoが来た macOSとiOSのシステムフォントがSan Franciscoになってから早くも2年が過ぎた。このフォントは内部的にTextとDisplayの2つをフォントサイズによって切り替えるとかやっている関係もあり、アプリケーションに対してフォント名が公開されていない。当然CSSでfont-family: "San Francisco", sans-serif;とかやっても指定できないので、ぐぐってfont-family: -apple-system, BlinkMacSystemFont, sans-serif;とかいうのを発見してコピペすれば、無事目的が達成されて万歳である。 -apple-systemの実際 '-apple-system'は、Appleが自らのブラウザSafari(エンジンとしてはWebKit)でSan Franciscoの特性を適切にサポー
CSS の font-family プロパティで「いろいろなサイトはどんなフォントを指定しているのかな？」を調べた際に感じたφ(..)メモメモの備忘録だ。最後に、今日時点での font-family 決定版を記しておいた。 前提 ・指定するのはゴシック体のみ ・明朝体は「さようなら」 ・できるだけ多くの人が読みやすいフォントを選ぶ 谷崎潤一郎とフォント谷崎潤一郎の「文章読本」にこのような文章がある。 我が国で一般に用いられている活字の大きさが小型に過ぎることは、前にも申し上げた通りであります。（前略）、我が国の如く美術的な文字を有し、楷、行、草、隷、篆、変態仮名、片仮名等、各種の字体を有する国が、それらの変化を視覚的効果に利用しないのは、間違っております。谷崎潤一郎は文章に対して、さまざまなコダワリがあったことで知られている。例えば、文章の頭で1マスあけない、など。「文章読本」も、これに則
Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
CSSのフォントファミリー指定を、ブラウザやOS間の差異を埋めるために、毎度時間をかけないようにメモすることにしました。 font-familyはこれで！body { /* フォントファミリ明朝 */ font-family:Times New Roman , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "MSP明朝","MS PMincho","MS 明朝",serif; } body { /* フォントファミリゴシック */ font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }「Verdana」と「Times New Roman」は
スタイルシートでのフォント指定 ココログ"hirobox : スタイルシートでのフォント指定の実際3"へ戻る→ 「単発」指定 serif sans-serif 'ＭＳ 明朝' 'ＭＳ Ｐ明朝' 'ＭＳ ゴシック' 'ＭＳ Ｐゴシック' 'Hiragino Mincho Pro' 'Hiragino Mincho Pro W3' 'Hiragino Mincho Pro W6' 'ヒラギノ明朝 Pro' 'ヒラギノ明朝 Pro W3' 'ヒラギノ明朝 Pro W6' 'Hiragino Mincho Pro'(font-weight:bold;) 'Hiragino Mincho Pro W3'(font-weight:bold;) 'Hiragino Mincho Pro W6'(font-weight:bold;) 'ヒラギノ明朝 Pro'(font-weight:bold;) 'ヒラギ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでのフォント指定について考える（2014年）｜DTP Transit
CSS上級者を悩ませるフォント指定を探究するぜ2011 autumn
やめよう、CSSのシステムデフォルトフォント指定 - Chienomi
CSSでのフォント指定について考える（2014年）｜DTP Transit
Web上でもフォント指定を推進！どのフォントが使われているか調べてみよう·WhatFont Tool MOONGIFT
CSSフォント指定を考える2015 - リシンプル
日本語ウェブフォントでサイトを明朝体表示。CSSフォント指定
2017年版個人的ベスト｜CSSフォント指定WIN、MACでキレイに表示（ゴシック、明朝）
サイト側でフォント指定してんじゃねえ！！とふと思ったので - こじらせません、勝つまでは
CSSでのフォント指定、それは戦い。 - Rewish
Adobe - デベロッパーセンター : CSSでのフォント指定について
多言語サイトのフォント指定 | 日本語、中国語、韓国語ページで使うfont-family - TOKiiRO
hirobox: Safari、スタイルシートでのフォント指定の実際
あの大手サイトは、文章部分にどのようなフォント指定（font-family）をしているのか？
cssのフォント指定を完璧にするぜ2009 winter
cssのフォント指定を完璧にするぜ2010 Spring with jQuery
CSSのfont-family指定の前知識とその問題点 【読みやすいフォント指定】
はてなサービスでのフォント指定の追加について - はてなダイアリー日記
いつも迷うfont-familyの指定。CSS font-familyフォント指定の基礎知識
[CSS] CSS Font Stack - CSSによるフォント指定の補助ツール
Apple製デバイスにおけるCSSのフォント指定を理解する - blog.takemaro.com
CSSのフォント指定と谷崎潤一郎｜yosh.ash｜note
中国語サイト作成時のフォント指定（font-family） - Qiita
CSSのフォント指定font-family、コレがおすすめ！｜ツーブロッカ
Safari、スタイルシートでのフォント指定の実際3（サンプル）