CSSで「セミボールド」フォントを設定するには?Font-weightを600にしても、Photoshopのファイルにあるようなセミボールドにはなりません。
質問
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
は問題なく動作します。
関連
-
[CSSチュートリアル】よくある2D変換を5つ実現するCSS
-
[CSSレイアウト例】float(フロート)、position(ポジション)プロパティの差分によるCSSレイアウト
-
[CSSチュートリアル】検索ボックスの非表示機能を実現するCSS(アニメーションの順送り・逆戻りシーケンス)
-
[CSS3] CSS3リスト無限スクロール/回転効果
-
[CSSチュートリアル]cssのbackgroundとborderタグの例 詳細
-
[CSSチュートリアル】CSSで実現するTikTokのテキストジッター効果例
-
[CSSレイアウト例】CSSで中央揃えを実現する方法N種
-
[CSSチュートリアル】擬似要素で実現する中空三角矢印とXアイコンの例
-
[CSSチュートリアル】background-positionプロパティのパーセンテージ値の使い方を探る
-
[CSSチュートリアル]モバイルにおけるviewportの具体的な使い方
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[css3]css3におけるtransformプロパティの4つの機能
-
[CSSチュートリアル】CSSの新機能には、ページの再描画や並び替えの問題をコントロールする機能が含まれています。
-
[css3]ピュアCSS3によるネオンライト効果
-
[css3]css3は、背景画像の色を変更するためのさまざまな方法を実現するために
-
[CSSチュートリアル】CSSで実現するイメージマッピングメソッド
-
[CSSチュートリアル】タイトルを上部に配置するスティッキーレイアウトを実現するためのCSS
-
[CSSチュートリアル]CSS動的高さ遷移のアニメーション効果の実装の
-
[CSSチュートリアル】ピュアCSSでDIVホバーを実現するサンプルコード(固定位置編)
-
[css3]本のページをめくるような効果を実現するcss3サンプルコード
-
[解決済み] 同じフォントに対して複数のフォントファイルを追加する方法を教えてください。