【31】OpenType機能を直接指定できる font-feature-settings

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

前回までの font-variant 関連のプロパティも、OpenTypeフォントの機能を利用するものでした。あっちはプロパティの値で機能を指定しましたが、今回の font-feature-settingsプロパティは、OpenTypeフォントの機能を 半角小文字4文字の機能タグ値(feature-tag-value)でジカに指定できます。

W3C の仕様書は、この font-feature-settingsプロパティは、font-variant 関連のプロパティ対応できる場合には、使うべきでないとしています。

このプロパティは「他の方法で OpenTypeフォント機能を使うことができない場合のための低レベルの機能」とされています。
特に「スモールキャップ」の表示で使わずに、font-variant-capsプロパティを使えって。

ですが、font-feature-settingsプロパティのほうがブラウザ実装が進んでいて、IE11, Edge も対応しています。(2018年5月記)

font-feature-settingsプロパティfont-variant 関係のプロパティも、Fonts Module Level 3 に含まれていて、これはまだ勧告候補。
今のところ font-variant 関係プロパティはまだ実装ブラウザが少ないので、font-feature-settingsプロパティのほうが使えるのが現状です。(2018年5月記)

本日のINDEX
  1. font-feature-settingsプロパティの値
    1. OpenTypeフォントとは
  2. font-feature-settingsプロパティの使い方
  3. OpenType機能タグ値(feature-tag-value)
    1. font-variant-capsで使うOpenType機能タグ値
    2. font-variant-positionで使うOpenType機能タグ値
    3. font-variant-ligaturesで使うOpenType機能タグ値
    4. font-variant-numericで使うOpenType機能タグ値
    5. font-variant-alternatesで使うOpenType機能タグ値
    6. font-variant-east-asianで使うOpenType機能タグ値
    7. font-feature-settingsプロパティでしか指定できないOpenType機能抜粋
  4. OpenType機能タグ値 の アルファベット順リスト

参考:
CSS Fonts Module Level 3 | W3C Candidate Recommendation | Shorthand font property: the font-feature-settings property
font-feature-settings - CSS | MDN

font-feature-settingsプロパティの値

font-feature-settingsプロパティの値です。

font-feature-settingsプロパティの値
キーワード normal:デフォルト値。OpenType機能を指定しません。
機能タグ値
feature-tag-value
4文字の ASCII文字による値です。4文字より多い・少ないとエラーになります。
(値の種類は下に詳細
グローバル値 inherit 親のfont-weightの値を継承(コレ書かなくても継承するけど)
initial 継承した親の font-weightの値を解消しデフォルト値に戻す
unset 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 全部

OpenTypeフォントとは

OpenTypeフォント(Open Type Font = OTF)は、デジタルフォントの規格です。

デジタルフォントは、大昔は等幅のビットマップフォントだけでした。文字コードは ASCII だけの時代です。
その後1990年代はじめ、Adobe の PostScript(ポストスクリプト = PS )、Apple の TrueType(トゥルータイプ = TT )といった「アウトライン情報を持つフォント」が登場しました。

OpenType は、Microsoft と Apple が共同開発した規格で「TrueType を発展させ、PostScriptフォントのアウトラインデータも収録できるようにしたもの」だそうです。
Unicode に対応し、6万個以上の字体を収録した、多言語に対応できるんだって。
同じフォントを、Win・Mac・インクジェットプリンタ・ポストスクリプトプリンタ などの区別なく使えます。

ちなみに、この後 Webフォントの規格として、WOFF(Web Open Font Format)が登場しました。Mozilla(Firefoxの会社)が開発し、2011年に W3Cが Web標準の1つとして勧告。
実体は OpenType と同じですが、圧縮方法が違い、メタデータなどが加わったものだそうです。

OpenType には、拡張機能があることが最大のメリット。
リガチャ、字体切替、プロポーショナルメトリクス、カーニングなど、たくさんの機能があります。

font-variant 関係のプロパティの「値(キーワード)」は、その拡張機能を利用するためのもの。

font-feature-settingsプロパティは、もっと直接的に、OpenType の拡張機能OpenType機能タグ値(feature-tag-value)を値として指定できます。

font-feature-settingsプロパティの使い方

font-feature-settingsプロパティの指定方法は、わりと単純ですが、いくつかルールがあります。

OpenType機能タグ値は「必ず4文字」

OpenType機能タグ値(feature-tag-value)は、必ず半角英数字 4文字 です。それより多くても少なくても無効。タグ値が間違ったら当然無効です。

/* smcp は small-caps を有効化します*/
font-feature-settings: "smcp";
/* 下の指定は無効(値が5文字だし)*/
font-feature-settings: "smcap";
/* 下の指定は無効(書き間違い)*/
font-feature-settings: "smpc";

*OpenType機能タグ値(feature-tag-value)のリストはこちら

値は " "(ダブルクォーテーション)か ' '(シングルクォーテーション)で囲む

OpenType機能タグ値は「 " "(ダブルクォーテーション)」または「 ' 'シングルクォーテーション)」で囲んで使います。

/*ダブルクォーテーション*/
font-feature-settings: "smcp";
<!--インラインで書くときは、シングルクォーテーションがいいね-->
<p style="font-feature-settings: 'smcp'; font-weight: bold">...</p>

有効は 1 か on。無効は 0 か off。1 がデフォルト

OpenType機能タグ値(feature-tag-value)の後に、有効は 1 か on、無効にしたいときは 0 か off を「半角スペース」で区切って付けます。
デフォルトは「1」なので、何も書かなければ「有効」ということ。無効にしたいときだけ、0 か off を付け足そう。

以下の指定は、すべて同じ指定です。

font-feature-settings: "smcp";
font-feature-settings: "smcp" 1;
font-feature-settings: "smcp" on;

指定した OpenType機能タグ値を無効にしたい場合は、下記のように指定します。

font-feature-settings: "smcp" 0;
font-feature-settings: "smcp" off;

復数指定は「,(カンマ)」で区切る

OpenType機能タグ値を復数指定したいときは「,(カンマ)」で区切ります。

font-feature-settings: "c2sc", "smcp";

スワッシュ(swsh)など復数の置き換え字体があるときは番号を書く

スワッシュ(swsh)、デザインのバリエーション(salt)、オーナメント(ornm)、アノテーション(nalt)など、置き換え字体に復数の選択肢がある場合は、「単位なしの正の整数」で何番目の置き換え字体か指定できます。

/*1番目のスワッシュ字体が有効*/
font-feature-settings: "swsh";
/*2番目のスワッシュ字体が有効*/
font-feature-settings: "swsh" 2;
/*スモールキャップが有効。スワッシュは1番目のスワッシュ字体が有効*/
font-feature-settings: "smcp" 1, "swsh" 1;
/*3番目のオーナメント字体が有効。1番目のスワッシュ字体が有効*/
font-feature-settings: "ornm" 3, "swsh";

OpenType機能タグ値(feature-tag-value)

たくさんの値がありますが、まずは font-variantプロパティでの指定と同じ機能を使う OpenType機能タグ値の一覧です。

font-variant-capsで使うOpenType機能
font-variant-positionで使うOpenType機能
font-variant-ligaturesで使うOpenType機能
font-variant-numericで使うOpenType機能
font-variant-alternatesで使うOpenType機能
font-variant-east-asianで使うOpenType機能

font-feature-settingsプロパティでしか指定できない機能もあります。

font-feature-settingsプロパティでしか指定できないOpenType機能抜粋

  • font-variant-caps
  • smcp 小文字をスモールキャップで表示
    font-variant-caps: small-caps;
    font-feature-settings: "smcp";
  • c2sc, smcp 大文字も小文字もスモールキャップで表示
    font-variant-caps: all-small-caps;
    font-feature-settings: "c2sc", "smcp";

    (未指定)Fonts Module

    (font-feature-settings: "c2sc", "smcp")Fonts Module

  • pcap 小文字をプチキャップ(petite caps)で表示
    font-variant-caps: petite-caps;
    font-feature-settings: "pcap";
  • c2pc, pcap 大文字も小文字もプチキャップに
    font-variant-caps: all-petite-caps;
    font-feature-settings: "c2pc", "pcap";
  • unic 大文字をスモールキャプ、小文字は通常の字体で
    font-variant-caps: unicase;
    font-feature-settings: "unic";
  • titl タイトル用の大文字で表示
    font-variant-caps: titling-caps;
    font-feature-settings: "titl";
  • font-variant-position
  • subs 下付き文字グリフで表示
    font-variant-position: sub;
    font-feature-settings: "subs";
  • sups 上付き文字グリフで表示
    font-variant-position: super;
    font-feature-settings: "sups";
  • font-variant-ligatures
  • liga, clig 常用合字(fi fl など)
    font-variant-ligatures: common-ligatures;
    font-feature-settings: "liga", "clig";
  • dlig 任意のリガチャ(フォントデザイナーが作った合字)
    font-variant-ligatures: discretionary-ligatures;
    font-feature-settings: "dlig";
  • hlig 古典的なリガチャ(ドイツ語の t と z の合字 tz など)
    font-variant-ligatures: historical-ligatures;
    font-feature-settings: "hlig";
  • calt 前後の文字による字体の変更(スクリプト体(筆記体)での「文字の連結」など
    font-variant-ligatures: contextual;
    font-feature-settings: "calt";
  • font-variant-numeric
  • lnum 数字をライニング数字で表示
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum";
  • onum 数字をオールドスタイル数字で表示
    font-variant-numeric: oldstyle-nums;
    font-feature-settings: "onum";
  • pnum 数字をプロポーショナル数字で表示
    font-variant-numeric: proportional-nums;
    font-feature-settings: "pnum";
  • tnum 数字を等幅で表示
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  • frac 分数をスラッシュで表示
    font-variant-numeric: diagonal-fractions;
    font-feature-settings: "frac";
  • afrc 分数を水平線で表示
    font-variant-numeric: stacked-fractions;
    font-feature-settings: "afrc";
  • ordn 序数詞を上付き文字で表示
    font-variant-numeric: ordinal;
    font-feature-settings: "ordn";
  • zero ゼロをスラッシュ付きのゼロで表示
    font-variant-numeric: slashed-zero;
    font-feature-settings: "zero";
  • font-variant-alternates
  • hist 古典的な字形に置き換え
    font-variant-alternates: historical-forms;
    font-feature-settings: "hist";
  • swsh デフォルトの字形を対応するスワッシュ字形に置き換え
    font-feature-settings: "swsh";
    /*復数のスワッシュ字形が存在する場合、対応する番号を入れます*/
    font-feature-settings: "swsh" 3;
  • salt デフォルトの字形からデザインのバリエーション字形に置き換え
    font-feature-settings: "salt";
    /*復数のバリエーション字形が存在する場合、対応する番号を入れます*/
    font-feature-settings: "salt" 3;
  • ss## 字形をデザインのバリエーションの「セット」に置き換え。##は 01〜20 の数字
    font-feature-settings: "ss01";
  • ornm ある特定の文字を オーナメント(装飾的な記号)に置き換え
    font-feature-settings: "ornm";
    /*復数のオーナメント字形が存在する場合、対応する番号を入れます*/
    font-feature-settings: "ornm" 3;
  • nalt アノテーション(丸付き数字や 反転文字など)字形に置き換え
    font-feature-settings: "nalt";
    /*復数のアノテーション字形が存在する場合、対応する番号を入れます*/
    font-feature-settings: "nalt" 3;
  • font-variant-east-asian
  • jp78 JIS X 0208-1978(旧JIS)の字形で表示
    font-variant-east-asian: jis78;
    font-feature-settings: "jp78";
  • jp83 JIS X 0208-1983(新JIS)の字形で表示
    font-variant-east-asian: jis83;
    font-feature-settings: "jp83";
  • jp90 JIS X 0208-1990 の字形で表示
    font-variant-east-asian: jis90;
    font-feature-settings: "jp90";
  • jp04 JIS X 0213-2004 の字形で表示
    font-variant-east-asian: jis04;
    font-feature-settings: "jp04";
  • smpl 中国語の簡体字の字形で表示
    font-variant-east-asian: simplified;
    font-feature-settings: "smpl";
  • trad 中国語簡体字・日本語の漢字を、対応する旧字体に置き換え
    font-variant-east-asian: traditional;
    font-feature-settings: "trad";
  • fwid 英数字を全角の文字(等幅全角字形)に置き換えて表示
    font-variant-east-asian: full-width;
    font-feature-settings: "fwid";
  • pwid 可変幅(プロポーショナル)フォントで表示 = カナを詰める(句読点は全角のまま)
    font-variant-east-asian: proportional-width;
    font-feature-settings: "pwid";

    (未指定)昨日、きょう、あした

    (font-feature-settings: "pwid")昨日、きょう、あした

  • ruby ルビ(ふりがな)の字形で表示
    font-variant-east-asian: ruby;
    font-feature-settings: "ruby";

font-variantで指定できず、font-feature-settingsプロパティでしか指定できない値もあります。いくつかピックアップしておきます。

  • halt 字幅半角メトリクス。句読点などの全角設計の字体を、半角(0.5 em)の幅に収まるように再調整。
    font-variant-east-asian: proportional-width(pwid)との違いは、句読点が詰まること(カナは全角のまま)・字体の置き換えではないことです。
    font-feature-settings: "halt";

    (未指定)昨日、今日、あした

    (font-feature-settings: "halt")昨日、今日、あした

  • palt プロポーショナルメトリクス。全角設計の字体を、プロポ−ショナルな幅に収まるように再調整。
    font-variant-east-asian: proportional-width(pwid)との違いは、カナも句読点も両方とも詰まること・字体の置き換えではないことです。
    font-feature-settings: "palt";

    (未指定)昨日、今日、あした

    (font-feature-settings: "palt")昨日、今日、あした

  • pkna プロポーショナルかな。カナのみをプロポ−ショナル字形に置き換えます。
    font-variant-east-asian: proportional-width(pwid)との違いは、日本語の「カナ」のみなこと(pwid はラテン文字にも使えます)
    font-feature-settings: "pkna";

    (未指定)昨日、今日、あした

    (font-feature-settings: "pkna")昨日、今日、あした

  • hwid 等幅半角字形。カナや数字などを、半角(0.5 em)の字体に置き換えます。
    font-feature-settings: "hwid";

    (未指定)本日、キャベツ1個200円

    (font-feature-settings: "hwid")本日、キャベツ1個200円

  • twid 等幅三分字形。数字などを、1/3em の字体に置き換えます。
    font-feature-settings: "twid";

    (未指定)バナナは5本で100円

    (font-feature-settings: "twid")バナナは5本で100円

  • qwid 等幅四分字形。数字などを、1/4em の字体に置き換えます。
    font-feature-settings: "qwid";

    (未指定)イチゴ2パック1200円

    (font-feature-settings: "qwid")イチゴ2パック1200円

OpenType機能タグ値 の アルファベット順リスト

Microsoft が用意している OpenType機能タグ値 の アルファベット順リストです。
タグ値はたった4文字ですが、間違えたら無効なので、確認したい時に便利です。
(クリックで別ウィンドウで開きます)

次回予告

フォント関連のプロパティは、今回で一応ひと段落です。

次回は、これまで何度か登場している vertical-alignプロパティについて。
これは要素の縦方向の整列の仕方を指定するプロパティです。

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
11 | 2018/12 | 01
- - - - - - 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.