CSS3フォント

@font-face は CSS3 のモジュールです。主に独自に定義した Web フォントを Web ページに埋め込みます。@font-face モジュールの登場により、Web 開発でフォントの使用について心配する必要がなくなりました。 Web セーフフォントのみを使用する必要はありません。 IE はそのようなことをサポートできるのかと疑問に思う人もいるでしょう。 @font-face 関数は IE4 からサポートされていたので、きっと驚かれるでしょう。英語の Web サイトやブログを見て、ホームページ上のロゴ、タグ、ページ上の手書きの英語スタイルなど、美しいカスタム Web フォントを目にした場合、これらはすべて @font-face によって実装されています。

まず、@font-face の文法規則を見てみましょう:

@font-face {

[font-family: <family-name>;]?

[ソース : [ <uri> [format(<string>#)] #;]?

[unicode-range: <urange>#;]?

[font-variant: <font-variant>;]?

[font-feature-settings:normal|<feature-tag-value>#;]?

[font-stretch: <font-ストレッチ>;] ?

[font-weight: <weight>];

[font-style: <style>];

}

値の説明:

font-family: のフォント名を設定します。テキスト。

font-style: テキストのスタイルを設定します。

font-variant: テキストが大文字か小文字かを設定します。

font-weight: テキストの太さを設定します。

font-stretch: テキストを水平方向に伸ばすかどうかを設定します。

font-size: テキストのフォントサイズを設定します。

src: カスタムフォントの相対パスまたは絶対パスを設定します。この属性は @font-face ルールでのみ使用できることに注意してください。

ブラウザとの互換性

@font-face とのブラウザ互換性の問題と言えば、これにはフォント形式の問題が関係します。ブラウザによってフォント形式のサポートに一貫性がないため、これは誰にとっても必要です。どのようなものかを調べてみましょうのフォントは、さまざまなバージョンのブラウザでサポートされています。以前、いくつかのフォント形式について簡単に説明しましたが、皆さんが理解できるように、この問題について個別に説明します。

1. TrueTpe(.ttf) 形式:

.ttfフォントは Windows および Mac で最も一般的なフォントです。RAW 形式であるため、このフォントをサポートするブラウザには [IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2] が含まれます。 +];

2. OpenType (.otf) 形式:

.otf フォントは、TrueType に基づいて構築された独自のフォント形式であるため、このフォントをサポートするブラウザーも提供されます。 [Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile Safari4.2+];

3. Web オープンフォントフォーマット (.woff) 形式:

フォントはWeb フォントの中で最も優れた形式であり、オープンな TrueType/OpenType 圧縮バージョンであり、メタデータパッケージの分離もサポートしています。 ];

4. 埋め込みオープンタイプ (.eot) 形式:

.eot フォントは、TrueType から作成できます。このフォントをサポートするブラウザは

です。 .svg ) 形式:

.svg フォントは、SVG フォントレンダリングに基づく形式です。このフォントをサポートするブラウザには、[Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+] が含まれます。

注: このセクションのブラウザ効果を実装するには、上記のフォント形式ファイルをダウンロードする必要があります。！！

りー

次のセクション

新しいファイル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
* {margin:0; padding:0;}
body { background-color: #fc0; padding-top: 50px;}
ul li { list-style: none;}
a { text-decoration: none;}
.clear { clear:both;}
.layout { width:604px; margin:0 auto;}
.layout li { display: block; float: left; border-right: 1px solid #930808; }
.layout li.last-child { border-right: none;}
.layout li a { display: block; width: 120px; height:120px; line-height: 120px; text-align: center; background-color: #f00;}
.layout li a i { color:#fc0;}
.layout li a:hover i { color:#fff;}
@font-face {
font-family: "icomoon";
src:url('fonts/icomoon.eot?-9731bi');
/*↑兼容IE9兼容模式打开IE8及其以下浏览器可以显示;*/
/*↓兼容IE9可以显示;*/
src:url("fonts/icomoon.eot?#iefix") format("embedded-opentype"),
url("fonts/icomoon.woff") format("woff"),
url("fonts/icomoon.ttf") format("truetype"),
url("fonts/icomoon.svg") format("svg");
/*EOT { 微软开发用于嵌入网页中的字体,IE专用字体; }
**WOFF { Web字体中最佳格式,被W3C推荐; }
**TTF { 由Microsoft和Apple联合开发的一套字体标准,是Mac OS和Win操作系统中最常见的的一种字体; }
**SVG { 用于SVG字体渲染的一种格式,是由W3C制定的开放标准的图形格式; }
*/
font-weight: normal;
font-style: normal;
}
.icon {
font-family: "icomoon";
font-style: normal;
font-weight: normal;
font-size: 90px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/*抗锯齿属性*/
}
</style>
</head>
<body>
 <!-- ul.layout>li*5>a[href=#]>i.icon -->
	<!-- Sublime Text 快捷拼写 -->
	<ul class="layout">
	<li><a href="#"><i class="icon"></i></a></li>
	<li><a href="#"><i class="icon"></i></a></li>
	<li><a href="#"><i class="icon"></i></a></li>
	<li><a href="#"><i class="icon"></i></a></li>
	<li class="last-child"><a href="#"><i class="icon"></i></a></li>
	<div class="clear"></div>
	</ul>
</body>
</html>

提出するリセットコード

自動運転

全画面表示