1

私は最近 HTML/CSS の学習を始めましたが、フォントとブラウザー間の互換性に本当に不満を感じ始めています。個人サイトでカスタム フォント (Klavika) を使用しており、それをサーバーにアップロードしましたが、ブラウザー間で互換性を持たせる方法がわかりません。このサイトはhttp://www.tommaxwell.meにあり、ご覧のとおり、表示されているフォントは非常に醜いです。誰かが私のコードを見て、私を正しい方向に導くことができますか?

CSS:

body {
background-image: url(209241_2453996366505_1946848896_o.jpg);
background-size:cover;
}

@font-face {
font-family: klavika-medium;
src: url(Klavika-Medium.otf);
}


h1 {
text-align: center;
margin-top: 10%;
font-family: klavika-medium;
color:#FFFFFF;
font-size: 6.250em;
}


p {
position: relative;
top:-8%;
text-align: center;
font-family: klavika-regular;
color:#FFFFFF;
font-size: 1.875em;

}

ul {
position: relative;
text-align: center;
list-style-type: none;
margin-top: 5%;
left:36.5%;
font-family: klavika-medium;
}


ul li {
font-size: 40px;
}


ul li a {
text-decoration: none;
color: #FFFFFF;
opacity: 0.8;
float:left;
padding-right:3%;

}


ul li a:hover {
opacity: 1.0;
}
4

2 に答える 2

4

ブラウザごとに異なる形式のフォントが必要です。http://www.fontsquirrel.com/fontface/generatorを試すことができます

そのサイトでは、フォントをすべての適切な形式に変換します。また、スタイルシートのサンプルも提供されるため、クロスブラウザーで使用するために既に準備されている css をコピーできます。もう 1 つの追加ボーナスは、画像やオーディオ フォントと同様に圧縮できることです。彼らのツールは、これを行うことで、より小さなフォントを提供することもできます。

ちなみに、フォント フェイスを宣言するときに、そのウェイトに関連付けられたフォント ウェイトも宣言できます。font-weight:100 は通常のフォントで、font-weight:600 は中程度のフォントです。これにより、名前を 1 つ覚えるだけでよく、フォントを使用する場所に適切な太さを適用するだけで済むため、フォントの使用が簡単になります。

于 2012-10-04T02:52:41.457 に答える
0

こんにちは、すべてのブラウザで動作するには、他の形式でも提供する必要があります。

オンラインコンバーターを試すことができます。

http://www.fontsquirrel.com/fontface/generator

http://www.font2web.com/

元：

    @font-face {
font-family: 'Conv_iskpota';
src: url('fonts/iskpota.eot');
src: local('☺'), url('fonts/iskpota.woff') format('woff'), url('fonts/iskpota.ttf') format('truetype'), url('fonts/iskpota.svg') format('svg');
font-weight: normal;
font-style: normal;}
于 2012-10-04T02:56:59.870 に答える