CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませて…
![モダン日本語フォント指定](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9b05b1af96d9369eef7854a11f845fdaae25554/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Ff6ccadc6152c4363a151e9d238cf4120%2Fslide_0.jpg%3F7009164)
結論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:新しい字形に対応をしている「ヒ
論より証拠,というわけでまずは iOS 7 を搭載した iPhone/iPad/iPod touch で下記の文字列をご覧くださいませ. ※ 2014 年 10 月 24 日追記:OS X Yosemite でも表示されるようになりました. ヒラギノ角ゴ W1 ヒラギノ角ゴ W2 ヒラギノ角ゴ W3 ヒラギノ角ゴ W6 ※ ヒラギノ角ゴ W3/W6 は iOS 6 以前から存在するフォントですが,比較のために用意しました. iOS 7 端末をもってないという方は以下にスクリーンショットを用意しましたのでご覧くださいませ. CSS での指定方法は ヒラギノ角ゴ W1 font-family: ".HiraKakuInterface-W1"; ヒラギノ角ゴ W2 font-family: ".HiraKakuInterface-W2"; 以上です.クォーテーション("")と先頭のピリオド(.)
What are Web Safe Fonts? Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems that you want to support. If you want to use fonts other than ones pre-installed, as of CSS3, you can use Web Fonts.
フロップデザインフォントという商用可の日本語フリーフォント フロップデザインフォントは、どなたでも自由に無料でダウンロードして、商用・非商用問わず使用できる日本語フリーフォントです。このフォントは第二水準の漢字も含まれ、ワープロ、Adobe製グラフィックソフトなどのアプリケーションで自由に加工して使えます。ひらがな、カタカナ、アルファベット、数字をオリジナルで制作し、残りの部分をM+FONTで補いました。またM+FONTで不足している漢字をIPAゴシックで補完しています。 フォントのデザイン特徴について 水平、垂直の線がデザインの基本となっているシンプルなゴシック体の日本語フォントです。暖かみのある手書きを感じさせるひらがな、シャープなイメージのカタカナ、スマートでデザイン性の高いアルファベット(英語)、スタンダードで読みやすい数字とそれぞれ異なる考えに基づいて作られたフォントです。しかし
今回、WEBCRE8.jpの優さん企画の#LOVEFONT Advent Calendar 2012というイベントにお誘いいただきました。 愛するフォントの魅力を語る・詳しくなくても構わない、と優しい声をかけていただいて勇気がでたので、私も参加させていただくことになりました。 今回の企画、Advent Calendarと#LOVEFONTについては、WEBCRE8.jpさんの記事をご覧ください。 2012年、今年こそはAdvent Calendarに参加しよう!! |WEBCRE8.jp#LOVEFONT | WEBCRE8.jp#LOVEFONT Advent Calendar やさしさゴシックって…?その名の通り、やさしい雰囲気の「やさしさゴシック」。 好きなポイントはいろいろあるのに、そのフォントについて知っていることは、とても少なかったので調べてみることにしました。 やさしさゴシッ
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。 @font-face { font-family: "FontAwesome"; src: url('/font/fontawesome-webfont.eot'); /* IE9 Compat Modes */ src: url('/font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/font/fontawesome-webfont.woff') format('woff'), /* Modern Browsers */ url('/font/f
2012年5月12日に青山ブックセンター本店で開催された欧文書体セミナーTypeTalks第10回「もっと知りたい!Webフォント」のスライドです。 ・・・ 【追記1】スライド10の「Arialは何と呼ぶ?」は、日本においてArialは色々な呼び方が流通しているという蛇足話で、正しい読み方を追求する意図はありません。統計データは当ブログのFacebookページで皆さんに行ったアンケート結果です。スライドのペラ1画像がひとり歩きしてしまっているため、この場で補足いたします。 【追記2】スライド62の「OpenTypeフォント機能に対応するブラウザ」は、現在Chromeも対応しています。 ・・・ 1. Webフォントとは? 1-1. Webで使えるフォント 1-2. Webフォントサービス 1-3. 利用者にとってのメリット 1-4. 制作者にとってのメリット 2. Webフォントの今 2-1
アイコン形式になったWebフォントを集めてみました。これだけ色々揃うと画像を使う場面も減ってくるかもしれませんね。 @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy i
変わったフォント「FF Chartwell」を紹介します。 数字と足し算からグラフを生成できます。 AdobeのIllustrator、InDesign、Photoshopで使えるようで(参考)、フォントとして「FF Chartwell」を選び、テキストに足し算を打ち込んで変換をかけるとグラフになります。 グラフ生成手順は言葉で書くよりも、プロモーション・ムービーを見た方がわかりやすいと思います。 使う文字は、数字と足し算だけのようですね。 美しいグラフが簡単に描けそうです。 「FF Chartwell」フォントは全部で7種類あり、それぞれ対応するグラフが異なります。 フォント・レーベル「FontFont」がこちらで販売しています(1種類 $25)。
Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。 Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 全てのアイコンです。 ソーシャルアイコンも揃っています。 例です。ドロップダウンやボタンにつけています。 大きさが自由に変更できるのもフォントならではです。 ドロップダウンにつけると機能がより分かりやすくなります。 カスタマイズすればレーティングに使ったりもできます。 ファイル構成です。SVGやフォントが提供されます。 Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立
Web Icon Fonts Webフォントで使えるアイコンセット。IE8以下では使えないです。iOS4.1以下も多分見られない。 _Download(35KB) @font-face{ font-family: 'WebIconFonts'; src: url('WebIconFonts.woff') format('woff'), url('WebIconFonts.ttf') format('truetype'); } .icon { font-family: WebIconFonts; } Arrows !Back! 1Back1 #Forward# 3Forward3 $Up$ 4Up4 %Down% 5Down5 &Done& 6Done6 'Close' 7Close7 (Plus( 8Plus8 )Minus) 9Minus9 Social Networks AAmazon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く