とを使用するfont-size:30px;
としfont-family:Verdana;
ます。
私はそれらの文字を大きくする必要がありますが、それでも薄いので、試してみfont-weight:lighter;
ました。
それでも何も変わりません。一部のフォントは小さくなり、一部は影響を受けません。
大きくて細い文字を作成するにはどうすればよいですか?CSSに方法はありますか、それともこれらは特定のフォントですか?
これは私が思いついた最も近いものです。
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ブラウザ(Safari、Chrome)でのみ機能します
。2。テキストの背後の背景が単色でない場合は、テキストストロークであることが表示されます。
http://jsfiddle.net/dru87/
フォントが特定の重みをサポートしていないため、Verdanaのより細いバージョンを実現するには、独自のバージョンのフォントをホストするか、すでにホストされている別のフォントを使用して外観を実現する必要があります。
一部のフォントは、それ自体のより軽い/より重いバージョンをサポートしていません。サポートしている場合、CSSの数値スケールと一致しない可能性があります(ご指摘のとおり)。
ここから。
非常に多くのプロ品質のWebフォントにはさまざまな重みがあるため、「通常」(400)と「太字」(600)だけを処理する必要がある場合よりも、数値スケールを使用する方がはるかに理にかなっています。通常、ファミリの重みは次の値にマッピングできます。
100:超軽量
200:薄い
300:軽い
400:通常
500:セミボールド
600:太字
700:エクストラボールド
800:重い
900:ウルトラヘビー
そこにあるキーワードに注意してください:通常。悲しいことに、家族が多数の重みを持っている場合や、独自の定義が必ずしも標準のスケールに準拠していない場合など、多くのフォントがこのパターンに準拠していないのが現実です。
つまり、簡単に言うと、フォントの「薄い」バージョン(作成/ダウンロードしたもの)をホストするか、別のフォントを使用する必要があります。
IMO Tahoma、Hedley、またはGenevaは似たようなフォントですが、これらは無料で入手できるわけではありません。あなたと@minitechの両方が指摘しているように、 Googleフォントを調べることができます。
薄いフォントを選択し、bigtext.js/fittext.jsまたはslabtext.jsを適用します
すべてのフォントがすべての幅をサポートしているわけではありません。あなたがいくつかの良い薄いフォントを探しているなら。あなたはこれらの薄いグーグルフォントリストを見ることができます。それらは無料で簡単に実装できます。
font-weight
フォントファミリーから異なる太さの書体(特定のフォント)を要求する手段の使用。Verdanaフォントファミリには通常よりも軽い書体がないため、通常どおりに使用できます。これは、Webページで通常使用できるほとんどのフォントに当てはまります。
たとえば、 Google Web Fontsでは、書体が通常よりも軽い多くのフォントファミリを見つけることができます。たとえば、SourceSansProのウェイトは200と300です。
注:書体の明度はフォントを基準にしています。フォントファミリのライト(200)は、別のフォントファミリの通常(400)に対応している可能性があります。
ステップ1:Googleからフォントをロードするために含める
https://fonts.googleapis.com/css?family=Lato:100italic'rel='stylesheet'type='text/css'> https://fonts.googleapis.com/css?family=Lato:100' rel ='stylesheet' type ='text / css'>
ステップ2:次のcssプロパティを追加します。.text{font-family:Lato、sans-serif;
フォントの太さ:100;
フォントサイズ:7em; }
終わり!
間違いなく動作します
詳細については、http://tobiasahlin.com/typesource/01-elements-of-html-and-css/をご覧ください。