CSS辞典 font-variant-capsプロパティの解説

スモールキャピタルの使用を指定する「font-variant-capsプロパティ」の使用方法を記載

CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

初期値normal
適用される要素すべての要素
モジュールCSS Fonts Module Level3
継承あり

概要・使用方法

{font-variant-caps: 使用方法;}Code language: CSS (css)

font-variant-capsプロパティは、スモールキャピタル(小文字と同じ高さで作られた大文字)などのグリフ(字体)の使用について指定します。

使用方法

normalスモールキャピタルを使用しない
small-caps大文字は通常の大文字のまま、小文字をスモールキャピタルで表示
all-small-caps大文字も小文字もすべてスモールキャピタルで表示
petite-caps大文字は通常の大文字のまま、小文字をプチキャップス(petite caps)で表示
all-petite-caps大文字も小文字も、すべてプチキャップス(petite caps)で表示
unicase小文字は通常の小文字のまま、大文字をスモールキャピタルで表示
titling-capsタイトル用の大文字で表示

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>font-variant-capsプロパティサンプルページ</title>
    <meta charset="uft-8">
    <style>
        div.sample{font-size:150%;}
        p.fontsample1{
                       font-variant-caps:normal;
                     }
        p.fontsample2{
                       font-variant-caps:small-caps;
                     }
        p.fontsample3{
                       font-variant-caps:all-small-caps;
                     }
        p.fontsample4{
                       font-variant-caps:petite-caps;
                     }
        p.fontsample5{
                       font-variant-caps:all-petite-caps;
                     }
        p.fontsample6{
                       font-variant-caps:unicase;
                     }
        p.fontsample7{
                       font-variant-caps:titling-caps;
                     }
    </style>
  </head>
  <body>
      <div class="sample">
          <p class="fontsample1">webfont Googlefontsample</p>
          <p class="fontsample2">webfont Googlefontsample</p>
          <p class="fontsample3">webfont Googlefontsample</p>
          <p class="fontsample4">webfont Googlefontsample</p>
          <p class="fontsample5">webfont Googlefontsample</p>
          <p class="fontsample6">webfont Googlefontsample</p>
          <p class="fontsample7">webfont Googlefontsample</p>
      </div>
  </body>
</html>
実行結果

webfont Googlefontsample

webfont Googlefontsample

webfont Googlefontsample

webfont Googlefontsample

webfont Googlefontsample

webfont Googlefontsample

webfont Googlefontsample

chrome 実行サンプル

font-variant-capsプロパティのchromeブラウザの実行結果

Firefox 実行サンプル

font-variant-capsプロパティのfirefoxブラウザの実行結果

edge 実行サンプル

font-variant-capsプロパティのedgeブラウザの実行結果

opera 実行サンプル

font-variant-capsプロパティのoperaブラウザの実行結果

すなりん

サイトの管理者「すなりん」です。現役のシステムエンジニアをしてます。要件定義からテスト、プロジェクトマネージャー、顧客調整、社内インフラなんでもこなします。いわゆるフルスタック・エンジニアです。 仕事柄色んな技術や製品を扱うことが多く、なかなか覚えているもの大変ですし、しばらくすると忘れてしまうことが多いので、自分なりの形で技術情報やIT関係の情報を掲載しています。 個人で仕事の合間をみながら記事の投稿やサイトを更新していますので、誤字や間違った内容があったりもしますので、閲覧者はご理解の上ご利用ください。

コメントを残す