【30-7】ショートハンドプロパティになった font-variant

最終更新日:2018年05月26日  (初回投稿日:2018年05月26日)

CSS 3(Fonts Module Level 3)からの font-variantプロパティは、これまで見てきた復数の font-variant 関係のプロパティ「ショートハンドプロパティ」になりました。
以下のプロパティの値を一括指定できます。
font-variant-capsプロパティ
font-variant-ligaturesプロパティ
font-variant-numericプロパティ
font-variant-alternatesプロパティ
font-variant-east-asianプロパティ

font-variant-positionプロパティの値はショートハンドに含まれていません。

CSS 2.1 での font-variantプロパティは、ショートハンドではなく、値は normal, small-caps の2つだけでした。(スモールキャップにするかどうかのプロパティだった)
この値は font-variant-capsプロパティで受け継いでいるので、ショートハンドの font-variantプロパティで指定しても大丈夫。CSS 2.1 での使い方をしても問題がないようになってます。

CSS 3(Fonts Module Level 3)では、font-variant 関係のプロパティOpenType機能を有効化・無効化するためのプロパティになった。これが最大の変更点です。

本日のINDEX
  1. font-variantショートハンドプロパティの値
  2. font-variantプロパティを使ってみます

参考:
CSS Fonts Module Level 3 | W3C Candidate Recommendation
font-variant - CSS | MDN

font-variantショートハンドプロパティの値

構文の中に「sub」「super」の値がないので、font-variant-positionプロパティの値はショートハンドに含まれていません

font-variantプロパティの値
キーワード normal:デフォルト値。
font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asianプロパティの値を normal にします。
font-variant-ligatures の値はデフォルトの none になります。
nonefont-variant-ligaturesプロパティ の値を none にします。
その他のプロパティは初期値の normal になります。
font-variant関連のプロパティの値は、すべて「キーワード」なので、あとは、指定したいプロパティのキーワードを「半角スペース」で区切って並べるだけ。
構文 normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name> #) || character-variant(<feature-value-name> #) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]
グローバル値 font-variant: inherit; 親の値を継承(コレ書かなくても継承するけど)
font-variant: initial; 継承した親の値を解消しデフォルト値に戻す
font-variant: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

どのショートハンドでも同じですが、ショートハンドで指定した値以外の値はすべてデフォルト値になります。

font-variant-alternatesプロパティの値の()内には @font-feature-values で特定した OpenTypeフォントの機能値の名前を入れますので、ショートハンドのときも、当然 @font-feature-values の指定が必要です。

font-variantプロパティを使ってみます

フォントは Mac はヒラギノ、Win は游ゴシック で指定しています。

(未指定) Chapter One
親譲りの無鉄砲で子供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間程腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。(坊っちゃん : 夏目漱石)

(font-variant: small-caps traditional proportional-width) Chapter One
親譲りの無鉄砲で子供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間程腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。(坊っちゃん : 夏目漱石)

Chrome(Mac)では下のように表示されました。

サンプルのHTMLです(font-variant はインラインで指定しています)

<div class="mihon">
  <p>
    <span>(未指定)</span>
    <b>Chapter One</b><br>
    親譲りの無鉄砲で(...略...)</p>
 <p style="font-variant: small-caps traditional proportional-width">
    <span>(font-variant: small-caps traditional proportional-width)</span>
    <b>Chapter One</b><br>
    親譲りの無鉄砲で(...略...)</p>
</div>

サンプルのCSSです。

.mihon {
	color:black;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:0 1.5em
	}
.mihon p {
	font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro','Yu Gothic', '游ゴシック',sans-serif;
	font-weight: 400;
	font-size:1rem;
	margin:15px 0;
	text-align: justify;
	}
.mihon p span {
	font-size:15px;
	color:#579961;
	display:block;
	margin:.2em 0;
	font-variant: normal}
.mihon p b {
	font-size:1.3rem;
	color:#888}

次回予告

次回は font-feature-settingsプロパティを使おう。
これまで見てきた font-variant 関係のプロパティで使う OpenTypeフォントの機能機能タグ値(feature-tag-value)直接指定することができるプロパティです。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2018/08 | 09
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.