[B! *CSS3][font] yamadarのブックマーク

もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita

HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。﹁日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。﹂﹁Webで文字詰めだと？無理なんだよあきらめな！﹂なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで

yamadar 2017/11/21

これ系のCSSプロパティが無い頃、1文字ずつ letter-spacing を調整していたデザイナ兼コーダーの彼を思い出す。

リンク

CSSでwebフォントの読み込みが遅い問題を改善する方法 - Qiita

💀 Webフォントの問題点 Webフォントに限らず、ブラウザでテキストを表示する過程には、フォントの読み込み作業が存在します。また、フォントを読み終えるまではテキストを表示させない機能1がブラウザには組み込まれています。ローカル環境下のフォントであれば読み込みに時間はあまりかからないので問題ありませんが、webフォントの場合はローカルフォントと比べると読み込みに多くの時間を要してしまいます。この機能の影響で、ページのロードをしてからテキストが表示されるまでの間、ユーザーはテキストを読むことができない為、不満や苛立ちを覚え、体験価値の低下やページの離脱を引き起こすと考えられます。 ⚔️ 'font-display'プロパティでこの問題に立ち向かう font-displayというCSSプロパティを用いることで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの

yamadar 2017/08/16

Webフォントを使用する時は、“font-display: swap;”も併用するとWebフォントが読み込まれるまでに一時的に他のフォントを表示できる

リンク

文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング - ICS MEDIA

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事﹁Webフォントサービスの徹底比較！和文フォントが使える5つのサービスの利点まとめ﹂を参考ください。 ▲左側は未指定︵和文等幅︶の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。対応環境‥ほぼすべてのブラウザで利用可能これだけ便利なCSSですが、どれだけの

yamadar 2016/12/01

以前、一文字ずつCSS指定してカーニングしてた友人を思い出した

font
*CSS3

リンク

グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？ | 初代編集長ブログ―安田英久 | Web担当者Forum

今日は、Webフォントの話題を。日本語Webフォントは、﹁使いたい、でも重くなるからちょっと﹂という人が多いと思います。でも、グーグルがクラウド上でWebフォントを提供し始めたことで……。グーグルが日本語のWebフォントをクラウドで提供開始グーグルが日本語のWebフォントを提供し始めていました。実は、2014年7月からあったらしいのですが、私はつい最近になって知りました。その名も、﹁Noto Sans Japanese﹂。このページの表示も、﹁Noto Sans Japanese﹂にしてあります。 Noto Sans Japaneseは、6934文字に削減したサブセット版が提供されており、ウェイト︵太さ︶が7バリエーション。1ウェイトあたり約4.5Mバイトほどのサイズです。使い方を簡単に説明すると、CSSで定義ファイルを読み込み、 <style> @import url(http:/

yamadar 2015/03/10

リンク

WebフォントのCSS指定2014年度版とこれまでの歩み

比べる。 WEBCRE8.jpとその仲間達で、web制作における﹁選択﹂において最良だと思われるものを考察していくカテゴリです。最近Webフォントについて色々調べたので、これまでの経緯やメジャーどころの記法を踏まえつつ良い書き方を探った結果を共有しておきます！私自身はまだ実務で積極的に使っているわけじゃないんですが…(でもぼちぼち使ってます)。足りない部分もあると思うんで何か指摘があったらがんがんツッコんでくださいw @font-faceルール @font-faceルールは、Webフォントの名称と読み込むフォントファイルを関連づける@ルールの一つです。その他、どのウェイトやスタイルに対応するかも指定できます。しかしWebフォントの扱いはブラウザ側のフォントファイルの対応状況、フォントファイル自体の進化によって変遷してきました。 Bulletproof Syntax これまでWebフォ

yamadar 2014/05/22

リンク

M+ WEB FONTS

Index of /webfonts NameLast modifiedSizeDescription Parent Directory - basic_latin/2018-02-01 18:45 - general-j/2018-02-01 18:45 - multi_latin/2018-02-01 18:45 - sample-j/2017-11-01 11:46 - Apache/2.4.10 (Debian) Server at mplus-fonts.osdn.jp Port 80

yamadar 2013/10/19

かっこいいwebフォント

リンク

FOUT

Flash of Unstyled Textの頭文字をとってFOUTと呼ばれる現象がある。FirefoxでWebフォントの読み込みが完了するまで別のフォントが使われる現象のことで、後にSafariやChrome、Internet Explorerで起こるようになった読み込みの完了まで空白になる現象のことも含めてFOUTと呼ぶことが多い(気がする)。このWebサイトでも起こっていて、それについて聞かれたのでさらっと書いてみる。この現象の原因はCSSの処理やWebページのレンダリングと並行してWebフォントのHTTPリクエストが行われることにあるので、仕様と言って良い。起こらないようにするにはWebフォントの読み込みが終わるまで他の処理をブロックするとかしないといけないため、改善される可能性はあるけどまず直ることはない。日本のWebサイトではあまり起こらないように感じるのは、Webフォント自

yamadar 2013/08/23

webfontが読み込み完了するまで空白になったり別のフォントが使われる問題。

リンク

フォントの読み込み完了を検知する

TypeKitとかがやってるWebフォントの読み込みが終わったらhtml要素にクラス名を振るアレの話。TypeKitがオープンソースでリリースしているWebFont Loaderを使う方法が安全で安定。Googleがホスティングしているのもあるので手軽でもある。でも読み込み完了の検知以外にも機能があってパワフルすぎる気がするので、Adobe Blankを使って自前で書いてみることにした。 Adobe Blankのサイズ削減 Adobe Blankはそのまま使うと30KB以上ある。読み込み完了検知だけなら幅0のグリフが1つあればそれで良いので、まずはサブセット化してサイズを抑えることから。aだけのWOFFなAdobe Blankを作ればちょうど1KBくらいになる。 Download: adobe-blank.woff @font-face定義の追加外部リクエストにすると意味が薄れるのでDa

yamadar 2013/08/23

リンク

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

yamadar 2013/06/11

Googleのwebfontサービス

リンク

意外と多い!? Web フォントに対応していない環境～2012 年の Web フォント事情

Web フォントは﹁Web サイトにフォントを埋め込む﹂ための技術です。先日、Web フォントを使った絶対にコピペできない文章を作ったったwwww を公開しました。多くの人に楽しんでもらえたのですが、その一方で、Web フォントが適用されなかった方から﹁コピペできるんだけどどういうこと？﹂﹁意味が分からない﹂というコメントがよせられました。ほぼすべてのブラウザーが Web フォントに対応しているはずなのですが、一体、何が原因だったのでしょうか。そこで、Web サーバーのアクセスログを解析して﹁Web フォントに対応していない環境﹂がどの程度あったのかを調べてみました。4種類のフォーマット一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の4種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし

yamadar 2013/05/25

webフォントを使わない設定にしている人は確実に数パーセント居る。

リンク

CSS3 「rem」って何だ。

CSS3を勉強する際に大切なことは2つあります。ひとつ目は、”知っているプロパティをいかに上手に使うかということ”、二つ目は、”知らないプロパティをもっと勉強すること”だと言えます。今回は、後者のあまり知られていないであろう﹁rem﹂を紹介いたします。とは言っても﹁rem﹂はプロパティではなく単位になります。単位表示でおなじみの﹁em‥エム﹂に似ていますが﹁em﹂の様に親要素の値に影響を受ける事はありません。フォントサイズの指定を考えてみましょう。﹁px﹂を利用するとフォントサイズを固定することができて制作する際には便利だったりしますが、最近ではスマートフォンなどのモバイルサイト向けに﹁Responsive Web Design﹂というデザイン手法で﹁em﹂のような相対単位を﹁Responsive Type Setting﹂として利用します。ただし、IEでは﹁em﹂を利用すると

yamadar 2013/05/12

「rem」の意味は「root」+「em」で、root 要素のフォントサイズを継承することになります。

*CSS3
font

リンク

画像の代わりに使えるアイコンタイプのWebフォントのまとめ

アイコン形式になった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

yamadar 2012/08/29

素晴らしい！

リンク

画像アイコンはもう古い！CSSでスタイル自由自在のアイコンWebフォント

Font Awesome, the iconic... / Foundation Icons Fonts -... / Typicons他...全5件

yamadar 2012/06/29

リンク

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

yamadar 2011/07/29

リンク

自分のWebサイトのフォントを簡単に選べて自由に使える「Google Web Fonts」のバージョン2が公開

CSSやJavaScriptからGoogleが提供するオープンソースのフォントをロードして、100種類以上の中から好みのフォントを利用出来るサービス﹁Google Web Fonts﹂の紹介です。OSやブラウザが違っていてもフォントを統一する事ができる上、とても簡単なステップで使えるという点も魅力的です。ステップ1‥好みのフォントを選択する下記サイトから好みのフォントを﹁Add to Collection﹂をクリックし選択します。また、上部タブからフォントを﹁Word(文字)﹂、﹁Sentence(文章)﹂、﹁Paragraph(段落)﹂で確認することが出来ます。 Google Web Fonts 選択したフォントはコレクションされ下部に表示されます。2つのフォントを選択したところ。選択したフォントをダウンロードし、ローカル環境などのインターネットにつながっていない環境でフォント使用

yamadar 2011/07/29

Google Web Fonts!

リンク

@font-face: The Potential of Web Typography — by Craig Mod

The Potential of Web Typography: @font-face and Firefox 3.5 by Ian Lynam & Craig Mod Firefox 3.5 is out. And the more users download it, the more designers will be able to take advantage of the @font-face CSS rule. How can @font-face be used with currently implemented CSS selectors to create engaging, nuanced and more mature typography? Let's find out. @font-face — what it is exactly? B @font-face

yamadar 2011/02/26

Webフォント参考

*CSS3
font

リンク

Webフォントを使ってみよう！@font-face 関連の情報いろいろ

Webフォントを使う機会があったのでついでに備忘録的メモです。 @font-face関連の情報いろいろ。と言っても、まだそんなに情報が無いので触りを理解するためのまとめ的な記事です。 Webフォントの良い所は、編集作業が不要、コピペも可能でテキストだからSEO的にも有利になりますけど、アンチエイリアスはフォントに依存しますし、日本語フォントはどうしても少なくなってしまうデメリットもあります。クロスブラウザでWebフォントを利用するには /* IE */ @font-face { font-family: abc; src: url(abc.eot); } /* Firefox, Opera, Safari */ @font-face { font-family: abc; src: url(abc.ttf) format("truetype"); }としてあげるといいみたい。IE

yamadar 2011/02/26

Webフォントまとめ

*CSS3
font

リンク

Adobe Originals | Adobe Fonts

The Adobe Originals program started in 1989 as an in-house type foundry at Adobe, brought together to create original typefaces of exemplary design quality, technical fidelity, and aesthetic longevity. Today the Type team’s mission is to make sophisticated and even experimental typefaces that explore the possibilities of design and techno logy. Typefaces released as Adobe Originals are the result o

yamadar 2010/08/17

Typekit。

リンク

WebFonts として利用できるフリーの和文フォント | ヨモツネット

blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日ブログ作りなおそうかなーと思って、この Webサイトをみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せてみたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページはXHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき

yamadar 2010/08/08

WebFontsとして利用出来る和文フォント！