[解決済み] CSS @font-face - "src: local('☺')" ってどういう意味?
質問
私は
@font-face
を初めて使うので、fontsquirrel からフォントキットをダウンロードしました。
彼らが私のCSSに挿入することを推奨しているコードは、次のとおりです。
@font-face {
font-family: 'junctionregularRegular';
src: url('Junction-webfont.eot');
src: local('☺'),
url('Junction-webfont.woff') format('woff'),
url('Junction-webfont.ttf') format('truetype'),
url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}
さて、スマイリー・フェイスの件は私を困惑させています。 しかし、src の中の URL の数もそうです。なぜこれほど多くのファイルを推奨しているのでしょうか、また、ページがレンダリングされるときに、それらがすべてブラウザに送信されるのでしょうか。 .ttf 以外をすべて削除すると何か問題があるのでしょうか?
どのように解決するのですか?
font-squirrel の font-face ジェネレータのメモを読むと、それが paul irish によるやらせであることがわかります。
以下は、彼の ブログ投稿 :
そして...に関して
@font-face
構文私は今、オリジナルの防弾構文よりも防弾スマイリーのバリエーションを推奨しています。
@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); }
弾丸ポストから
はい、スマイリーフェイスです。OpenType の仕様では、2 バイトの Unicode 文字は Mac のフォント名ではまったく機能しないので、誰かが実際にそのような名前のフォントをリリースする可能性は低くなります。
ブロック クォートスマイリーがより良い解決策である理由はいくつかあります。
Webkit+ フォント管理ソフトウェアでは ローカル参照を混乱させることがあります。 グリフを A ブロックに変換するような
OS X では、フォント管理ソフトウェアがシステム設定を変更して がシステム設定を変更し ダイアログを表示します。 ローカル() フォントにアクセスしようとすると にアクセスしようとすると、ダイアログが表示されます。詳細は を私の弾き語り投稿に追加しました。 フォントエクスプローラXは は、Firefox の他の機能を混乱させることが知られています。 Firefox で他のものを台無しにすることでも知られています。
可能性は低いですが のフォントを参照することができます。 とはまったく異なる を参照することができます。(Typophileの投稿で 異なるフォント、同じ名前) 少なくともリスクはある。 をコントロールすることになる。 ブラウザとホストマシーンに委ねることになります。この このリスクは、フォントのダウンロードを避けるという利点に見合わないかもしれません。 このリスクは、フォントのダウンロードを避けるという利点に見合うものではないかもしれません。
これらはすべてかなりエッジケースの問題ですが、検討する価値はあります。
関連
-
[CSSチュートリアル】よくある2D変換を5つ実現するCSS
-
[CSSチュートリアル】カットコーナー+ボーダー+プロジェクション+コンテンツ背景色のグラデーション効果を実現するCSS
-
[CSSチュートリアル】純粋なCSSでWebページの内容をコピーできないようにする方法
-
[CSSチュートリアル]cssの位置固定コードで左右2重の位置決め
-
[css3]ピュアCSS3によるネオンライト効果
-
[CSSチュートリアル】CSSプロパティ*-gradientの有用性を探る
-
[CSSチュートリアル]テーブル table :nth-child()を使って行間の色変更と整列を実現する。
-
[css3]CSS3遷移回転遠近法2D3Dアニメーションなどの効果を持つサンプルコード
-
[解決済み] CSSセレクタの"~"(チルダ/スクイグル/ツイドル)はどういう意味ですか?
-
[解決済み] CSSセレクタの「+」(プラス記号)の意味は何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】よくある2D変換を5つ実現するCSS
-
[CSSチュートリアル】カットコーナー+ボーダー+プロジェクション+コンテンツ背景色のグラデーション効果を実現するCSS
-
[CSSチュートリアル】CSSのfloatとunfloatについて
-
[CSSチュートリアル】CSSもこんな風に遊べる?気まぐれグラデーションの極意
-
[CSSチュートリアル]CSSは、メソッドのさまざまな記事の分割行のスタイルの要約を達成するために
-
[CSSチュートリアル】クールなネオン効果を実現するピュアCSS(デモあり)
-
[CSSチュートリアル】CSS3で3つの効果例の背景をぼかす。
-
[css3]css3アニメーションマウスが絵の上に置かれると徐々に大きくなり、マウスが絵から離れると徐々に縮む効果
-
[ブラウザ互換性チュートリアル]IE9でのネイティブページの互換性問題の解決方法について
-
[css3]CSS3遷移回転遠近法2D3Dアニメーションなどの効果を持つサンプルコード