2013-03-11 14 views
6

私はfont-size:30px;font-family:Verdana;を使用します。大きな文字のサイズ、細い文字

enter image description here

私は大きいが、まだ薄いようにそれらの文字を必要とするので、私はfont-weight:lighter;を試してみました。

フォントは小さくなり、一部は影響を受けません。

大きくて薄い文字を作成するにはどうすればよいですか? CSSに方法があるの?それとも特定のフォントですか?

+1

のためにあなたが別のフォントを使用する必要があります動作します。数値も試してください: 'font-weight:100'など – Blender

+6

すべてのフォントがすべての重量で入っているわけではありません。あなたのニーズに合った[Google webfonts](http://google.com/webfonts)のフォントを探してみてください。 – Ryan

+0

これらの値を試してください:100,200,300。そのうちの1つが機能するはずです。また、GoogleのWebフォントを使用する場合は、それらの薄いバージョンをインポートすることを確認してください。 – WooCaSh

答えて

3

、あなたはフォントの独自のバージョンをホストする、あるいはすでにあなたの外観を達成するためにホストされている別のフォントを使用する必要があります。

一部のフォントは、より軽い/重いバージョンのフォントをサポートしていません。もしそうであれば、(あなたが指摘したように)CSSの数値スケールに揃えられないことがあります。

here

非常に多くのプロ品質のウェブフォントが 重みがさまざまであるため、それは今、我々は唯一の(400)「正常」に対処しなければならなかったときにそれがなかった よりも数値のスケールを使用することがはるかに理にかなっていると、 '太字'(600)。 典型的には、家族の重みは、これらの値にマッピングすることができる。

100:ウルトラライト

200:シン

300:光

400:レギュラー

500:セミボールド

600:太字

700:エクストラ太字

800:ヘビー

900:ウルトラヘビー

注キーワード、そこに:一般的。現実には、悲しいことに、 フォントの多くは、ファミリが複数の重みの を持つ場合や、独自の定義が必ずしも標準の縮尺に準拠しない場合など、このパターンに適合しないことがあります。フォントの「シンナー」バージョン(あなたはどちらか作っ1 /ダウンロード)をホスト、または別のフォントを使用するかに

だから、長い話を短く、あなたが持っています。

IMO Tahoma、HedleyまたはGenevaはフリーフォントではありませんが、Google fontsには、@minitechの両方が指摘されています。

4

これは私が思いついたもっとも近いものです。

div{ 
    font-family:Verdana; 
    font-size:30px; 
    font-weight:100; 
    -webkit-text-stroke-color: rgb(255,255,255); 
    -webkit-text-stroke-width: 1px; 
    -webkit-font-smoothing: antialiased; 
} 

問題:
1のみのWebKitブラウザ(サファリ、クローム)
2で動作するテキストの背景が無地でない場合、テキストのストロークであると表示されます。一定の重みをサポートしていないため、フォントに、MS Pゴシックのskinnierバージョンを達成するために
http://jsfiddle.net/dru87/

+0

ありがとうございます。 Webkitのアンチエイリアスは私の状況で非常に役立ちます! – Dan

0

フォントファミリは異なる量の書体(特定のフォント)を求めfont-weight手段の使用。 Verdanaフォントファミリには、通常よりも軽い書体はありません。これは、通常Webページで使用できるほとんどのフォントに適用されます。

Google Web Fontsでは、たとえば、あなたは、例えば、通常より軽い書体、と多くのフォントファミリを見つけることができますソースなきProはウェイト200と300

注意を持っている:書体の明るさは、フォントを基準にしています。フォントファミリのlight(200)は、別のフォントファミリの通常(400)フォントに対応します。

1

ないすべてのフォントを適用するには、すべての幅をサポートしています。あなたが良い薄いフォントを探しているなら。これらのthin google fontsリストをご覧ください。彼らは自由で実装が簡単です。

0

ステップ1:

https://fonts.googleapis.com/css?family=Lato:100italic」のrel = 'スタイルシート' タイプ= 'テキスト/ cssの'> httpsをGoogleからのフォントをロードすることで含めます://fonts.googleapis.com/css家族=ラト:?100' のrel = 'スタイルシート' タイプ= 'テキスト/ cssの'>

ステップ2:次のCSSプロパティを追加 の.text { フォントファミリ:ラト、 サンセリフ;

フォント重量:100。

フォントサイズ:7em。完了 }

は間違い

より多くの情報訪問http://tobiasahlin.com/typesource/01-elements-of-html-and-css/

関連する問題