CSS @font-faceに使用する新しい構文の基礎知識と使い方、format()とtech()、OpenType-SVGとCOLRv1によるカラーフォントの表示

2023/08/03 8 users 構文 Edge Safari Firefox Chrome

CSSの@font-faceで見慣れない構文があるなと思ったら、どうやら新しい構文がChrome, Edge, Safari, Firefoxの各ブラウザにサポートされていました。 CSSの@font-faceに使用する新しい構文の基礎知識と使い方を紹介します。 The new @font-face syntax by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログ... 続きを読む

Firefox 36 が unicode-range デスクリプタをサポート、文字コード範囲を指定してフォントを適用可能に | WWW WATCH

2014/11/17 32 users フォント Firefox Nightly 特定 適応範囲 適用

現在、Firefox Nightly としてリリースされている、Firefox 36 で、unicode-range デスクリプタがサポートされました。unicode-range は @font-face デスクリプタで、読み込んだフォントの適応範囲を指定します。 例えば、ある要素内のテキストのうち、特定の文字のみ、あるいは特定の文字コード範囲に含まれる文字のみを、別のフォントで置き換えたい場合な... 続きを読む

安全でアクセシブルなアイコン・フォント

2014/01/28 65 users アイコン・フォント Bullet フォント ブラウザー

Translation of: Bulletproof Accessible Icon Fonts by Filament Group アイコン・フォントを利用する場合、あらゆるユーザーに適切にアイコンを提供しようとすると、かなり気をつける必要があります。そのフォントが読み込まれなかった時にどうなりますか？@font-faceがまだサポートされていないブラウザーでは？どうすれば安全に(bullet... 続きを読む

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

2012/08/28 390 users アイコンタイプ Format src font-family

アイコン形式になったWebフォントを集めてみました。これだけ色々揃うと画像を使う場面も減ってくるかもしれませんね。 @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentyp... 続きを読む

CSS3で画像レスなソーシャルサイト連携ボタンサンプル集「Zocial」:phpspot開発日誌

2012/02/02 20 users Zocial CSSスプライト 見栄え CSS アイコン

Zocial | CSS3 Button Set CSS3で画像レスなソーシャルサイト連携ボタンサンプル集「Zocial」 font-faceでアイコンをつけつつCSS3でデザインされたボタン集です。とても画像じゃないとは思えないんですが画像です。 押した時にCSSで切替えられるのはCSSスプライトより簡単でいいですね。見栄えも綺麗です 次のようなアイコン形式のボタンなんかもあります 関連エントリ... 続きを読む

有料から無料になったCSS3による42種のウェブアプリボタンセット「Zocial」 - GIGAZINE

2012/01/30 641 users GIGAZINE Zocial 有料 CSS3 ベクター形式

もともとは24ドル(約1800円)の有料セットだったのですが、今は無料でダウンロード可能なのが「Zocial」です。42種類のCSS3によるフォントフェイス(font-face)と、ベクター形式によって自由なサイズでキレイに描画できるアイコンボタンの組み合わせとなっています。 Zocial ~ CSS3 Buttons, Sass Framework. http://zocialbuttons.c... 続きを読む

CSS3で注目のWebフォントについて今から勉強するためのサイトあつめました | Webデザインクリップ｜Web制作に便利な情報を集めたまとめサイト

2011/11/16 446 users Webフォント Webデザインクリップ CSS3 Web制作

CSS3のWebフォント機能を使うと、サーバー上にあるフォントファイルを使用するので、ユーザーのPCにインストールされていないフォントを表示できるようになり、ユーザーのフォント閲覧環境に依存しません。適用方法も簡単で、使用したいフォントファイルをサーバーにアップロードし、CSS3の@font-faceでフォントファイルを指定し読み込ませるだけで利用できます。これによりフォントによる自由な表現が可能... 続きを読む

[CSS]スマートフォンからデスクトップまで、Responsive Web Design用のCSSのフレームワーク -MQFramework | コリス

2011/11/09 91 users コリス タイポグラフィ グリッド フレームワーク CSS

MQFrameworkの特徴 スクリーンサイズ 5つの異なるスクリーンサイズに対応。 320px, 480px, 768px, 960px, 1140px グリッド グリッドは12カラムをベースにし、さまざまなレイアウトに対応。 タイポグラフィ @font-faceを使ったタイポグラフィ。 使い方が簡単 スマートフォンからデスクトップまで対応したResponsive Web Designのサイトを... 続きを読む

Google ChromeでＭＳ ＰゴシックをArial+メイリオに置換する - Weblog - hail2u.net

2011/04/22 60 users Weblog hail2u.net unicode フォント

最近のブラウザではWebフォントの利用を可能にする@font-faceをサポートしており、使われているサイトもよく見かけるようになった。@font-faceはWebフォントの利用に限らず、ローカルのフォントの再定義にも使えるので、ユーザースタイルシートで利用すればＭＳ Ｐゴシックをメイリオに置換することが出来る(Chromeでも)。これに留まらず@font-faceデスクリプターのunicode-... 続きを読む

CSS3のよく使いそうな１０個のテクニックのまとめ:phpspot開発日誌

2011/04/20 162 users phpspot開発日誌 まとめ テクニック CSS3 RGBa

The top 10 CSS3 techniques | Feature | .net magazine CSS3のよく使いそうな１０個のテクニックのまとめエントリのご紹介。 font-face によってマシンに入ってないフォントを使うCSS例 opacity による要素の透明度指定 rgbaでRGBと透明度を併せて指定 border-radiusによる角丸 box-shadowによるブロックに影... 続きを読む

CSS3を使った新しい画像置換の方法 : Web Design KOJIKA17

2011/03/28 39 users CSS3 Web Design KOJIKA17 方法 推奨

ソースコードはテキストで、見た目は画像に変える画像置換について、CSSでよく使われる方法はtext-indent:-999pxが有名だと思いますが、新しく考えたのでメモ。現状の画像置換について2009年の時点でGoogleはこの方法を推奨していません。最近であれば、@font-faceの使用をGoogleは推奨という記事があります。しかし日本では@font-faceの使用は難しいのが現状です。 日... 続きを読む

text-indentを使った画像置き換えはスパム判定の危険あり、“@font-face”の使用をGoogleは推奨 at SMX West 2011 | 海外SEO情報ブログ

2011/03/15 132 users text-indent 明言 エントリ CSS セッション

今日のエントリもSMX West 2011のセッションからのレポートです。text-indentによる画像置き換えの代替手段をGoogleが提示してくれました。CSSのtext-indentで-999pxを指定し、文字テキストと画像を置き換えるテクニックは昔からあるごくありふれたテクニックです。ところがGoogleは、現在この方法を推奨していません。 推奨していないというよりも使うべきでないと明言... 続きを読む

[CSS]IEを含めた主要ブラウザと各スマートフォンに対応した@font-faceの指定方法 | コリス

2011/02/06 170 users コリス iOS font-family CSS 記述

IE6, 7, 8, 9をはじめとする主要ブラウザ、iOS, Androidのスマートフォンに対応させるための@font-faceの指定方法を紹介します。各ブラウザ・スマートフォンに対応させる@font-faceの指定方法各主要ブラウザ、スマートフォンに対応させる@font-faceの記述は、下記のようになります。@font-face {font-family: 'MyFontFamily';sr... 続きを読む

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

2010/10/27 279 users アンチエイリアス Webフォント net フォント コピペ

Webフォントを使う機会があった のでついでに備忘録的メモです。 @font-face関連の情報いろいろ。 と言っても、まだそんなに情報が 無いので触りを理解するための まとめ的な記事です。 Webフォントの良い所は、編集作業が不要、コピペも可能でテキストだからSEO的にも有利になりますけど、アンチエイリアスはフォントに依存しますし、日本語フォントはどうしても少なくなってしまうデメリットもあります... 続きを読む

[CSS]コピペで使える、テキスト周りをかっこよくするCSS3のエフェクト集 | コリス

2010/10/25 492 users コリス Gloss Font Webkit系 CSS

対応ブラウザはCSS3を使用しているため、CSS3をサポートしているブラウザのみで、一部のものはWebkit系（Chrome, Safari）のみとなっています。 Letterpress（レタープレス） Small Caps（スモールキャピタル） CSS Coupon（クーポン券） Stitched（ステッチ） Gloss（グロス） Stroked Text & @font-face（@font-... 続きを読む