【26-4】font-stretch で condensed などの文字幅を選択しよう

最終更新日:2018年03月31日  (初回投稿日:2018年03月20日)

フォントファミリーには、 condensed、expanded などの文字幅が違うフォントフェイスが用意されているものもあります。それらを選択するには font-stretchプロパティを使います。

これは日本語・中国語などのフォントではなく、欧文フォント用のプロパティです。

本日のINDEX
  1. font-stretchプロパティの値
    1. フォントファミリーにあるフォントフェイスを使う

フォント関連のプロパティは、fontショートハンドプロパティで まとめて指定することができます。今回も含めて数回フォント関連のプロパティの記事が続き、最後にショートハンドでの書き方をまとめます。

【26-1】font-familyプロパティでフォント(書体)を指定しよう
【26-2】font-sizeプロパティでフォントのサイズを指定しよう
【26-3】font-weightでフォントのウェイト(太さ)を指定しよう
【26-4】font-stretch で condensed などの文字幅を選択しよう ←今日はココ
【26-5】font-styleプロパティでフォントを斜体に指定しよう
【26-6】line-heightプロパティで 行間(行の高さ)を指定しよう
【26-7】フォントをまとめて指定する fontショートハンドプロパティ

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

font-stretchプロパティの値

font-stretchプロパティの値には、9種類のキーワードが用意されています。

font-stretchプロパティの値
キーワード normalがデフォルト値
semi-condensed, condensed, extra-condensed, ultra-condensed
semi-expanded, expanded, extra-expanded, ultra-expanded
グローバル値 font-stretch: inherit; 親のfont-stretchの値を継承(コレ書かなくても継承するけど)
font-stretch: initial; 継承した親の font-stretchの値を解消しデフォルト値に戻す
font-stretch: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 全部

フォントファミリーにあるフォントフェイスを使う

font-stretchプロパティは、使っているフォントファミリーの中に、文字幅が狭い、または広いフォントフェイスがあれば、それを使って表示します。
font-stretch で指定した値のフォントが無ければ、無反応。ノーマルタイプの文字幅で表示するだけです。

各OSに搭載されたフォントファミリーは、ウェイトならいくつか用意されていますが、condensed や expanded などの文字幅を用意しているもの少ないようです。
(有料フォントなら豊富なものも。英文サイトでフォントを凝りたいなら購入してもイイかも)

Helvetica Neue を使って、9種類の値全部を試してみました。
「Condensed」があるようです(Boldだけどw)

font-stretch: ultra-condensed font-stretch: extra-condensed font-stretch: condensed font-stretch: semi-condensed font-stretch: normal font-stretch: semi-expanded font-stretch: expanded font-stretch: extra-expanded font-stretch: ultra-expanded

上のサンプルのソースです。

<div class="mihon">
  <span style="font-stretch: ultra-condensed">font-stretch: ultra-condensed</span>
  <span style="font-stretch: extra-condensed">font-stretch: extra-condensed</span>
  <span style="font-stretch: condensed">font-stretch: condensed</span>
  <span style="font-stretch: semi-condensed">font-stretch: semi-condensed</span>
  <span style="font-stretch: normal">font-stretch: normal</span>
  <span style="font-stretch: semi-expanded">font-stretch: semi-expanded</span>
  <span style="font-stretch: expanded">font-stretch: expanded</span>
  <span style="font-stretch: extra-expanded">font-stretch: extra-expanded</span>
  <span style="font-stretch: ultra-expanded">font-stretch: ultra-expanded</span>
</div>
<style>
.mihon {
	font-family:'Helvetica Neue',Helvetica,sans-serif;
	font-size:2rem;
	line-height:1.2;
	color:black;
	margin:0;
	border:solid 1px #ccc;
	padding:0 .7em}
.mihon span {
	display:block;
	margin:.5em 0}
</style>

font-stretch で指定した値がフォントファミリーに無い場合は、ノーマルより狭いフォントフェイスは狭い方の4段階に、ノーマルより広いフォントフェイスは広い方の4段階に当てはめられるんだそうです。
下の図は、ファミリーに「condensed, normal, expanded」の3種類があった場合の表示例です。

次回予告

次回は、font-styleプロパティを使おう。
これはフォントの正体か斜体かのスタイルを決めるプロパティです。

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2018/04 | 05
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 - - - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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