1. ホーム
  2. css

CSSで「セミボールド」フォントを設定するには?Font-weightを600にしても、Photoshopのファイルにあるようなセミボールドにはなりません。

2023-10-26 18:25:21

質問

Photoshopで XHTML 変換しているのですが、ウェブサイトデザイナーはMyriad Pro Semi-boldフォントを使い、フォトショップファイルではきれいに見えますが、CSSでsemi-boldオプションを試すと、普通の太字フォントのように見え、私の目的には太すぎました。HTML と CSS でより見栄えのするセミボールドフォントを実現する方法はありますか、それとも「font-weight: 600;」で我慢するしかないのでしょうか。

どのように解決するのですか?

現実的な方法としては font-family のようにセミボールドの具体的な名称を値にすることです。

font-family: "Myriad pro Semibold"

という名前にします。(個人的には自分の フォント一覧ツール を使用しています。これは、CSS で使用可能な名前によって私のシステム内のフォントを確認するために、Internet Explorer 上でのみ動作します)。

この手法では font-weight は必要ありません(おそらく設定しない方がよいでしょう)。

Web ブラウザはフォントのウェイトを本に従って実装するのが苦手です: 大体、ボールド以外の特定のウェイトのバージョンを見つけることができません。回避策は、物事がどのように機能するか想定されていないにもかかわらず、フォント ファミリ名に情報を含めることです。

Windows システム上でしばしば異なるフォント ウェイト バージョンが存在する Segoe UI でテストしたところ、論理的なアプローチ (フォント ファミリ名 Segoe UI を使用し、異なるフォント ウェイト バージョンの font-weight の値を使い分ける)という論理的な方法でInternet Explorer 9に適切なバージョンを選択させることができましたが、Firefox 9とChrome 16では失敗しました(normalとboldのみが機能)。これらすべてのブラウザで、たとえば font-family: Segoe UI Light は問題なく動作します。