文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事『Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ』を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 font-feature-settin
CSS SANS
CSS SANS は、WEB上でデザイン・文字組をするためのプログラミング言語 CSS でつくられたフォント。 WEBの歴史・進化を映し出し、時代に合わせて形を変える、これまでにないフォントです。 CSS SANS is the font created by CSS, the programming language for web designing and typesetting. It is an unprecedented font that reflects history and evolution of the Web, and even changes its own shape. フォントの成り立ちHow the font is madeCSS でできることは、WEBページのレイアウトを整えたり、文字組・文字間の調整をしたりなど、様々。 ただひとつ、「文字自体をデザイン
アイコンフォントでリンクタイプ別にアイコンつける方法
アイコンフォントでリンクタイプ別にアイコンつける方法CSS3を使ったアイコンフォントで、テキストリンクをもう少し華やかに！画像を使うと案外手間がかかるテキスト横のアイコンを、Webフォントを使って簡単に表示させましょう。今回はリンク先や拡張子で異なるアイコンを表示する方法を紹介します。 アイコンフォントとは？アルファベット 1 文字に 1 つのアイコンが設定されているフォントの総称です。サーバー上にあるフォントファイルを読み込んでフォントを表示する「Web フォント」の応用として使われ始めました。今までのような画像を使ったアイコンとは違い、フォントはベクターファイルなので、サイズを大きくしてもギザギザに見えることはありません。つまり iPhone や iPad といった高解像度のディスプレイでも、劣化することなくきれいに表示されます。 ただし！何らかの原因でフォントファイルがダウンロードさ
CSSでのフォント指定について考える（2014年）｜DTP Transit
結論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：新しい字形に対応をしている「ヒ
[WebDev]三点リーダ問題、webfontでついに解決！……か？ | orangeProse
で、「日本語フォントのunicode-range」に対応していないブラウザではどうなっちゃうのかというと、 @font-faceのローカル参照に対応しているFirefoxやSafariでは、unicode-rangeディスクリプタが無視されて単にメイリオで上書きされるので、すべての文字がメイリオで表示される @font-faceのローカル参照に対応していないIE8以前ではsans-serifで表示される ということになります。 （上記のコードはメイリオとArialのみの例示です） （Macに対応するため、"HelveticaArialHiraginoMeiryo"みたいにどんどん上書きしていく必要があります） （それと、Android OSだと、ローカル参照があると、そのフォントが在っても無くてもローカルフォントで表示しようとします。と2011年6月に出版された『CSS［略］） 2つ目：W
ITCFonts.com
As of March 28, 2024, all fonts previously sold on Fonts.com are now available for purchase at MyFonts.com and through Monotype’s subscription service, Monotype Fonts, where applicable. Your customer history will be preserved on MyFonts or through a subscription on Monotype Fonts*. Whichever route you choose, both platforms offer flexible licensing options and convenient ways to access and use the
1分でできる Google Web Fonts を使って CSS3 の Web Font を使おう
Web Fonts を使えばパソコンにインストールされていないフォントを表示させることができます。見出しなどに特殊なフォントが使ってある際に、わざわざ画像で用意したりする手間を省くことができます。私のサイトでもロゴに使用しています。 実際に試すことで勉強になりますので、一緒に勉強してみましょう。 Web Fonts を導入する HTML ファイルの作成 まず導入するための HTML ファイルを作ります。 <html> <head> <title>Weble</title> <style type="text/css"> .logo { font-size: 72px; } </style> </head> <body> <p class="logo">WEBLE</p> </body> </html> ブラウザで表示すると以下のようになります。 Google Web Fonts を使う G
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Font Comparer - Compare Fonts Side by Side
IEにも対応！10分でできるWebフォント実装法 (1/3)
Loading...