diff options
| -rw-r--r-- | files/ja/web/css/css_fonts/index.md | 194 | ||||
| -rw-r--r-- | files/ja/web/css/css_fonts/opentype_fonts_guide/index.md | 239 | ||||
| -rw-r--r-- | files/ja/web/css/css_fonts/variable_fonts_guide/index.md | 275 |
3 files changed, 314 insertions, 394 deletions
diff --git a/files/ja/web/css/css_fonts/index.md b/files/ja/web/css/css_fonts/index.md index c1584ac37f..d6cec50da2 100644 --- a/files/ja/web/css/css_fonts/index.md +++ b/files/ja/web/css/css_fonts/index.md @@ -4,19 +4,21 @@ slug: Web/CSS/CSS_Fonts tags: - CSS - CSS フォント - - Reference + - ガイド - 概要 + - リファレンス translation_of: Web/CSS/CSS_Fonts --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong>CSS フォント</strong>は CSS のモジュールの一つで、フォントに関するプロパティを定義し、どのようにフォントリソースを読み取るのかを定義します。これによって、単一の文字に利用できる複数のフォントがある場合、使用するフォントのスタイルを、例えばフォントファミリ、寸法、太さ、行の高さ、グリフの種類を定義することができます。</p> +**CSS フォント** (CSS Fonts) は CSS のモジュールの一つで、フォントに関するプロパティを定義し、どのようにフォントリソースを読み取るのかを定義します。これによって、単一の文字に利用できる複数のフォントがある場合、使用するフォントのスタイルを、例えばフォントファミリー、寸法、太さ、行の高さ、字体の種類を定義することができます。 -<h2 id="Basic_example" name="Basic_example">基本的な例</h2> +<h2 id="Basic_example">基本的な例</h2> -<p>以下の例は、テキストの段落をスタイル付けする基本的なフォントプロパティの使い方を示します。</p> +以下の例は、テキストの段落をスタイル付けする基本的なフォントプロパティの使い方を示します。 -<pre class="brush: css">p { +```css +p { width: 600px; margin: 0 auto; font-family: "Helvetica Neue", "Arial", sans-serif; @@ -25,117 +27,69 @@ translation_of: Web/CSS/CSS_Fonts font-variant-ligatures: normal; font-size: 2rem; letter-spacing: 1px; -}</pre> - -<pre class="brush: html"><p>Three hundred years ago<br> - I thought I might get some sleep<br> - I stretched myself out onna antique bed<br> - An' my spirit did a midnite creep</p></pre> - -<p>結果は以下のようになります。</p> - -<p>{{EmbedLiveSample('Basic_example', '100%', '200')}}</p> - -<h2 id="Variable_fonts_examples" name="Variable_fonts_examples">可変フォントの例</h2> - -<p>たくさんの可変フォントの例を <a href="https://v-fonts.com/">v-fonts.com</a> および <a href="https://www.axis-praxis.org/">axis-praxis.org</a> で見ることができます。詳しい情報と使い方の情報は、<a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">可変フォントガイド</a>も参照してください。</p> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="Properties" name="Properties">プロパティ</h3> - -<div class="index"> -<ul> - <li>{{cssxref("font")}}</li> - <li>{{cssxref("font-family")}}</li> - <li>{{cssxref("font-feature-settings")}}</li> - <li>{{cssxref("font-kerning")}}</li> - <li>{{cssxref("font-language-override")}}</li> - <li>{{cssxref("font-optical-sizing")}}</li> - <li>{{cssxref("font-size")}}</li> - <li>{{cssxref("font-size-adjust")}}</li> - <li>{{cssxref("font-stretch")}}</li> - <li>{{cssxref("font-style")}}</li> - <li>{{cssxref("font-synthesis")}}</li> - <li>{{cssxref("font-variant")}}</li> - <li>{{cssxref("font-variant-alternates")}}</li> - <li>{{cssxref("font-variant-caps")}}</li> - <li>{{cssxref("font-variant-east-asian")}}</li> - <li>{{cssxref("font-variant-ligatures")}}</li> - <li>{{cssxref("font-variant-numeric")}}</li> - <li>{{cssxref("font-variant-position")}}</li> - <li>{{cssxref("font-variation-settings")}}</li> - <li>{{cssxref("font-weight")}}</li> - <li>{{cssxref("line-height")}}</li> -</ul> -</div> - -<h3 id="At-rules" name="At-rules">@-規則</h3> - -<dl> - <dt>{{cssxref("@font-face")}}</dt> - <dd> - <div class="index"> - <ul> - <li>{{cssxref("@font-face/font-family", "font-family")}}</li> - <li>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</li> - <li>{{cssxref("@font-face/font-style", "font-style")}}</li> - <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li> - <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li> - <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li> - <li>{{cssxref("@font-face/src", "src")}}</li> - <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li> - </ul> - </div> - </dd> - <dt>{{cssxref("@font-feature-values")}}</dt> -</dl> - -<h2 id="Guides" name="Guides">ガイド</h2> - -<dl> - <dt><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">テキストとフォントのスタイル付けの基礎</a></dt> - <dd>この初心者向けの学習記事で、基本的なテキストやフォントのスタイル付けを、ウェイト、ファミリとスタイル、 font 一括指定、テキスト配置とその他の効果、行、字間など、詳細にわたって全て通します。</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide">OpenType フォント特性ガイド</a></dt> - <dd>フォント特性またはバリアントは、 OpenType フォントに含まれている様々な字形や文字スタイルを参照します。これらには合字 ('fi' や 'ffl' のような特殊な形の文字の組み合わせ)、カーニング (特定の字形の組み合わせにおける間隔の調整)、分数、数字のスタイル、他にもたくさんあります。これらはすべて OpenType の特性として参照され、特定のプロパティや低水準制御プロパティ — {{cssxref("font-feature-settings")}} を通してウェブ上で使用することができます。この記事は、 CSS で OpenType フォント特性を使用することについて知る必要があるすべてのことを紹介します。</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">可変フォントガイド</a></dt> - <dd><strong>可変フォント</strong>は OpenType フォント仕様書が進化したもので、幅、太さ、スタイルごとに別々のフォントファイルを用意するのではなく、さまざまな種類のフォントを単一のファイルに組み込むことができます。この記事では、可変フォントを使い始めるために必要なことをすべて紹介します。</dd> -</dl> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Fonts')}}</td> - <td>{{Spec2('CSS4 Fonts')}}</td> - <td><code>font-variation-settings</code> (および関連する高水準プロパティ) および <code>font-optical-sizing</code> を追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Fonts')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td><code>font-feature-settings</code> (および関連する高水準プロパティ)</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#font', '')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>({{cssxref("font-weight")}} や {{cssxref("font-style")}} など) 基本フォントプロパティの多くはブラウザー間で良く対応されていますが、もっと新しいもののいくつかは対応が限られています。全体としてはそれぞれのリファレンスページにあるブラウザーの対応情報を見る必要があります。</p> +} +``` + +```html +<p>Three hundred years ago<br> + I thought I might get some sleep<br> + I stretched myself out onna antique bed<br> + An' my spirit did a midnite creep</p> +``` + +結果は以下のようになります。 + +{{EmbedLiveSample('Basic_example', '100%', '200')}} + +## 可変フォントの例 + +たくさんの可変フォントの例を [v-fonts.com](https://v-fonts.com/) および [axis-praxis.org](https://www.axis-praxis.org/) で見ることができます。詳しい情報と使い方の情報は、[可変フォントガイド](/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)も参照してください。 + +## リファレンス + +### プロパティ + +- {{cssxref("font")}} +- {{cssxref("font-family")}} +- {{cssxref("font-feature-settings")}} +- {{cssxref("font-kerning")}} +- {{cssxref("font-language-override")}} +- {{cssxref("font-optical-sizing")}} +- {{cssxref("font-size")}} +- {{cssxref("font-size-adjust")}} +- {{cssxref("font-stretch")}} +- {{cssxref("font-style")}} +- {{cssxref("font-synthesis")}} +- {{cssxref("font-variant")}} +- {{cssxref("font-variant-alternates")}} +- {{cssxref("font-variant-caps")}} +- {{cssxref("font-variant-east-asian")}} +- {{cssxref("font-variant-ligatures")}} +- {{cssxref("font-variant-numeric")}} +- {{cssxref("font-variant-position")}} +- {{cssxref("font-variation-settings")}} +- {{cssxref("font-weight")}} +- {{cssxref("line-height")}} + +### アットルール + +- {{cssxref("@font-face")}} +- {{cssxref("@font-feature-values")}} + +## ガイド + +- [テキストとフォントのスタイル付けの基礎](/ja/docs/Learn/CSS/Styling_text/Fundamentals) + - : この初心者向けの学習記事では、テキスト/フォントのスタイル付けの基本的な部分をすべて詳しく説明しています。フォントの太さ、ファミリー、スタイルの設定、フォントの一括指定、テキスト配置などの効果、行と文字の間隔の設定などです。 +- [OpenType フォント特性ガイド](/ja/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide) + - : フォント特性またはバリアントは、 OpenType フォントに含まれている様々な字形や文字スタイルを参照します。これらには合字 ('fi' や 'ffl' のような特殊な形の文字の組み合わせ)、カーニング (特定の字形の組み合わせにおける間隔の調整)、分数、数字のスタイル、他にもたくさんあります。これらはすべて OpenType の特性として参照され、特定のプロパティや低水準の制御プロパティ — {{cssxref("font-feature-settings")}} を通してウェブ上で使用することができます。この記事は、 CSS で OpenType フォント特性を使用することについて知る必要があるすべてのことを紹介します。 +- [可変フォントガイド](/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide) + - : **可変フォント**は OpenType フォント仕様が進化したもので、幅、太さ、スタイルごとに別々のフォントファイルを用意するのではなく、さまざまな種類のフォントを単一のファイルに組み込むことができます。この記事では、可変フォントを使い始めるために必要なことをすべて紹介します。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------ | +| {{SpecName('CSS4 Fonts')}} | {{Spec2('CSS4 Fonts')}} | `font-variation-settings` (および関連する高水準プロパティ) および `font-optical-sizing` を追加。 | +| {{SpecName('CSS3 Fonts')}} | {{Spec2('CSS3 Fonts')}} | `font-feature-settings` (および関連する高水準プロパティ) を追加。 | +| {{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS1', '#font', '')}} | {{Spec2('CSS1')}} | 初回定義 | diff --git a/files/ja/web/css/css_fonts/opentype_fonts_guide/index.md b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.md index 27d674de65..3a46141327 100644 --- a/files/ja/web/css/css_fonts/opentype_fonts_guide/index.md +++ b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.md @@ -1,5 +1,5 @@ --- -title: OpenTypeフォント機能の手引き +title: OpenType フォント特性の手引き slug: Web/CSS/CSS_Fonts/OpenType_fonts_guide tags: - CSS @@ -7,184 +7,168 @@ tags: - Text translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide --- -<p>{{CSSRef}}</p> +{{CSSRef}} -<p>フォントの機能及び派生とは，OpenTypeフォントに含まれる異なるグリフや文字様式を指します。これらには合字（「fi」又は「ffl」といった文字を組み合わせた特殊なグリフ），文字詰め（特定の字形の組の間隔の調整），分数，数字様式，及びその他多数が含まれます。これらは全てOpenType機能と呼ばれており，Web上での利用には特定のプロパティ郡及び低級制御プロパティの一つを介します――{{cssxref("font-feature-settings")}}。本稿ではCSSにおけるOpenTypeフォント機能の利用について，知っていなければならない全てを提供します。</p> +フォント特性 (font features) または異体字 (variants) とは、OpenType フォントに含まれるさまざまな字形や文字スタイルのことです。これらには、合字 ('fi' や 'ffl' などの文字を組み合わせた特別な字形)、カーニング (特定の文字の組み合わせの間隔の調整)、分数、数字のスタイルなどがあります。これらはすべて OpenType 機能と呼ばれ、特定のプロパティや低レベルの制御プロパティ - {{cssxref("font-feature-settings")}} を通じてウェブ上で使用できるようになっています。この記事では、CSS で OpenType フォント特性を使用するために必要なすべての知識を提供します。 -<p>幾つかのフォントでは，前述の機能の内一つ又は複数個が既定で有効です（一般的な例: 字詰め及び既定合字）が，他の機能については，デザイナー又は開発者に，個別の事案で有効にするか否かの選択肢が委ねられています。</p> +フォントによっては、これらの特性のうち 1 つ以上が既定で有効になっているものもあれば (カーニングや既定の合字が一般的な例です)、特定の場面で有効にするかどうかをデザイナーや開発者に委ねているものもあります。 -<p>In addition to broad feature sets like ligatures or lining figures (numerals that line up evenly as opposed to 'oldstyle', which look more like lower-case letters), there are also very specific ones such as stylistic sets (which might include several specific variants of glyphs meant to be used together), alternates (which might be one or more variants of the letter 'a'), or even language-specific alterations for East Asian languages. In the latter case, these alterations are actually necessary to properly express the language, so they go beyond the more stylistic preference of most other OpenType features.</p> +合字や lining 字形 (小文字のように見える 'oldstyle' とは対照的に、均等に並ぶ数字) のような広範な特性セットに加えて、スタイリスティックセット (一緒に使用することを意図した字形のいくつかの特定の異体字を含む場合がある)、代替字形 (文字 'a' の 1 つまたは複数の異体字の場合がある)、あるいは東アジアの言語のための言語固有の変更など、非常に特殊なものもあります。後者の場合、これらの変更は、その言語を適切に表現するために実際に必要なものであり、他のほとんどの OpenType 機能のようなスタイル上の好みよりも重要です。 -<div class="warning"> -<p><strong>注意</strong>: There are many CSS attributes defined to leverage font features, but unfortunately many are not fully implemented. They are all defined and shown here, but many will only work using the lower-level {{cssxref("font-feature-settings")}} property. It's possible to write CSS to work both ways but this can become cumbersome. The issue with simply using <code>font-feature-settings</code> for everything is that every time you want to change one of the individual features, you have to redefine the entire string (similar to manipulating variable fonts with {{cssxref("font-variation-settings")}}).</p> -</div> +> **Warning:** フォントの特性を利用するために多くの CSS 属性が定義されていますが、残念ながらその多くは完全には実装されていません。これらはすべて定義されており、ここで紹介されていますが、多くは下位レベルの {{cssxref("font-feature-settings")}} プロパティでのみ動作します。両方の方法で動作するように CSS を記述することは可能ですが、これは面倒なことになります。すべてに `font-feature-settings` を使う場合の問題点は、個々の特性を変更するたびに、文字列全体を再定義しなければならないことです (可変フォントを {{cssxref("font-variation-settings")}} で操作するのと似ています)。 -<h2 id="フォント機能の可用性を知る">フォント機能の可用性を知る</h2> +## フォントの特性の有無の確認 -<p>This is sometimes the trickiest thing to work out if you don't have any documentation that came with the fonts (many type designers and foundries will provide sample pages and CSS just for this very reason). But there are some sites that make it easier to figure out. You can visit <a href="https://wakamaifondue.com">wakamaifondue.com</a>, drop your font file on the circle where instructed and in a few moments you'll have a full report on all the capabilities and features of your font. <a href="https://axis-praxis.org">Axis-praxis.org</a> also offers a similar capability, with the ability to click on the features to turn them on or off in a given text block.</p> +これは、フォントに付属しているドキュメントがない場合、最も厄介な問題です (多くのフォントデザイナーや工房がサンプルページや CSS を提供しているのはこのためです)。しかし、簡単に解決できるサイトもあります。 [wakamaifondue.com](https://wakamaifondue.com) にアクセスして、指示された円の上にフォントファイルをドロップすると、すぐにフォントのすべての特性と特徴に関する完全なレポートが得られます。 [Axis-praxis.org](https://axis-praxis.org) も同様の機能を提供しており、特性をクリックすると、指定したテキストブロックでそれらをオンまたはオフにすることができます。 -<h2 id="機能を利用する理由">機能を利用する理由</h2> +## 使用する理由 -<p>Given that these features take a bit of work to discover and use, it may seem a fair question to ask why one would bother to use them. The answer lies in the specific features that will make a site more useful, readable, and polished:</p> +これらの特性の知識を得て使用するには少し手間がかかることを考えると、「なぜわざわざ使うのか」という疑問が湧くのも無理はありません。その答えは、サイトをより便利に、より読みやすく、より洗練されたものにするための具体的な機能にあります。 -<ul> - <li><strong>Ligatures</strong> like 'ff' or 'fi' make letter spacing and reading more even and smooth.</li> - <li><strong>Fractions</strong> can make home improvement and recipe sites much easier to read and understand.</li> - <li><strong>Numerals</strong> within paragraphs of text set as 'oldstyle' sit more comfortably between lower-case letters, and likewise setting them as 'tabular numbers' will make them line up better when setting a list of costs in a table say. 'lining' figures on the other hand sit more uniformly on their own or in front of capitalized words.</li> -</ul> +- 'ff' や 'fi' のような**合字**を使うと、文字の間隔がより均一になり、よりスムーズに読めるようになります。 +- **分数**を使うことで、日曜大工やレシピのサイトがより見やすく、分かりやすくなります。 +- テキストの段落内の**数字**を 'oldstyle' に設定すると、小文字の間でより見やすくに配置され、同様に数字を 'tabular numbers' に設定すると、金額のリストを表に設定したときに見やすく並びます。一方、 'lining' の数字は、単独でも、大文字の単語の前でも、より統一感があります。 -<p>While none of these features individually will render a site useless due to their absence, each of them in turn can make a site easier to use and more memorable for its attention to detail.</p> +どの特性も、それがないからといってサイトが使えなくなるわけではありませんが、それぞれの特性があることで、より使いやすく、より印象に残るサイトになります。 -<blockquote> -<p>OpenType 機能は、フォント内の隠し部屋にたとえられます。隠し部屋の扉を開ければ、フォントの外観や振る舞いを少し、あるいは劇的に変えるための方法がわかります。すべての OpenType 機能が常に利用に適しているわけではありませんが、一部の機能は優れたタイポグラフィを実現するために不可欠です。<cite>――</cite><em><a href="https://helpx.adobe.com/jp/fonts/using/use-open-type-features.html">OpenType機能の使用</a> - アドビ</em></p> -</blockquote> +> OpenType の特性は、フォントの秘密のコンパートメントのようなものです。それらを利用できるようにすることで、フォントの外観や動作を微妙に、あるいは劇的に変化させる方法を見つけることができます。すべての OpenType 特性が常に使用するのに適しているわけではありませんが、いくつかの特性は優れた組版に不可欠です。 _-- Tim Brown, Head of Typography at Adobe_. -<h3 id="単なる様式ではなく，意味が丸ごと変わる場合も">単なる様式ではなく，意味が丸ごと変わる場合も</h3> +### 時にはスタイルだけでなく本質になることも -<p>時として――{{cssxref("font-variant-east-asian")}}のように――OpenType機能は或る種のグリフ異形を用いるのに直接結び付いており，意味や可読性に影響を与える可能性があります。そのような場合，OpenType機能は単に細かな見栄えを調整する以上の，寧ろ内容そのものに不可欠な部分を役めます。</p> +また、場合によっては — {{cssxref("font-variant-east-asian")}} のように — OpenType の特性が、特定の異体字を使用することに直結しており、それが意味や読みやすさに影響を与えることがあります。このようなケースでは、単なる飾りではなく、コンテンツ自体に不可欠な要素となります。 -<h2 id="フォント機能">フォント機能</h2> +## フォントの特性 -<p>There are a number of different features to consider. They are grouped and explained here according to the main attributes and options covered in the W3C specifications.</p> +考慮すべき特性がいくつかあります。ここでは、W3C の仕様書に記載されている主な属性やオプションに沿ってグループ化し、説明しています。 -<div class="note"> -<p><strong>Note</strong>: The examples below show the properties and some example combinations, along with the lower-level syntax equivalents. They may not match exactly due to browser implementation inconsistencies, but in many cases the first example will match the second. The typefaces shown are Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script, and Kokoro (all available and free to use, most are on Google Fonts and other services).</p> -</div> +> **Note:** 以下の例では、プロパティといくつかの組み合わせ例を、同等の低水準構文とともに示しています。ブラウザーの実装に不整合があるため、完全には一致しないかもしれませんが、多くの場合、一つ目の例は二つ目の例と一致します。表示されている書体は、Playfair Display、Source Serif Pro、IBM Plex Serif、Dancing Script、Kokoro です (すべて入手可能で無料で使用でき、ほとんどは Google Fonts やその他のサービスで提供されています)。 -<h3 id="字詰め_cssxreffont-kerning">字詰め ({{cssxref("font-kerning")}})</h3> +### カーニング ({{cssxref("font-kerning")}}) -<p>This refers to the spacing between specific glyph pairings. This is generally on by default (as recommended by the OpenType specification). It should be noted that if {{cssxref("letter-spacing")}} is also set on your text, that is applied after kerning.</p> +これは、特定の文字の組み合わせの間隔を意味します。これは通常、既定でオンになっています (OpenType 仕様で推奨されています)。なお、{{cssxref("letter-spacing")}} もテキストに設定されている場合は、カーニングの後に適用されますので注意が必要です。 -<div>{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}</div> +{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}} -<h3 id="代替_cssxreffont-variant-alternates">代替 ({{cssxref("font-variant-alternates")}})</h3> +### 代替字形 ({{cssxref("font-variant-alternates")}}) -<p>Fonts can supply a number of different alternatives for various glyphs, such as different styles of lower case 'a' or more or less elaborate swashes in a script typeface. This property can activate an entire set of alternates or just a specific one, depending on the values supplied.The example below is showing several different aspects of working with alternate characters. Fonts with alternate glyphs can make them available across the board or individually in separate stylistic sets, or even individual characters. In this example you can see two different typefaces, and the introduction of the {{cssxref("@font-feature-values")}} at-rule. This is used to define shortcuts or named options that can be defined per font family. This way you can create a named option that applies to only a single font, or one that is shared and can be applied more generally</p> +フォントは、小文字の 'a' の異なるスタイルや、筆記体における多かれ少なかれ精巧なスワッシュのように、様々な字形に対して多くの異なる代替案を提供することができます。このプロパティは、与えられた値に応じて、代替案のセット全体を有効にすることも、特定のものだけを有効にすることもできます。以下の例は、代替文字を扱う際のいくつかの異なる側面を示しています。代替字形を持つフォントでは、代替字形を全体的に使用できるようにすることも、個別のスタイルセットや個々の文字で個別に使用できるようにすることもできます。この例では、2 つの異なる書体と、{{cssxref("@font-feature-values")}} アットルールの導入を見ることができます。これは、フォントファミリーごとに定義できるショートカットや名前付きオプションを定義するためのものです。このようにして、単一のフォントにのみ適用される名前付きオプションや、共有されてより一般的に適用される名前付きオプションを作成することができます。 -<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}}</div> +{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}} -<p>In this case, <code>@stylistic(alternates)</code> will show all the alternate characters for either font). Applying this to just the word 'My' alters the way the 'M' renders, and applying <code>@styleset(alt-a)</code> only changes the lower case 'a'.</p> +この場合、`@stylistic(alternates)` は、どちらのフォントの代替文字もすべて表示します。これを 'My' という単語だけに適用すると、'M' のレンダリング方法が変わり、`@styleset(alt-a)` を適用すると、小文字の 'a' だけが変わります。 -<p>Try changing the line</p> +次の行を -<pre class="brush: css">font-variant-alternates: styleset(alt-a);</pre> +```css +font-variant-alternates: styleset(alt-a); +``` -<p>to</p> +このように変更してみてください。 -<pre class="brush: css">font-variant-alternates: styleset(alt-g); -</pre> +```css +font-variant-alternates: styleset(alt-g); +``` -<p>and notice that the lower case 'a' reverts to its regular form and the lower case 'g' changes instead.</p> +小文字の 'a' が標準形に戻り、小文字の 'g' が代わりに変化するのが分かるでしょう。 -<h4 id="代替フォントについての詳細">代替フォントについての詳細</h4> +#### 代替字形の詳細 -<ul> - <li><a href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates">https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates</a> +- <https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates> +- [https://developer.mozilla.org/ja/docs/Web/CSS/font-variant-alternates](/ja/docs/Web/CSS/font-variant-alternates) - <ul> - <li>〔日本語訳〕<a href="https://triple-underscore.github.io/css-fonts4-ja.html#propdef-font-variant-alternates">https://triple-underscore.github.io/css-fonts4-ja.html#propdef-font-variant-alternates</a></li> - </ul> - </li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates">https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates</a></li> -</ul> +### 合字 ({{cssxref("font-variant-ligatures")}}) -<h3 id="合字_cssxreffont-variant-ligatures">合字 ({{cssxref("font-variant-ligatures")}})</h3> +合字とは、2 つ以上の別々の文字を、(間隔や美観の観点から) よりスムーズに表現するために置き換える字形のことです。最も一般的なものとしては、'fi', 'fl', 'ffl' などの文字がありますが、他にも様々な可能性があります。最も頻繁に使用される合字 (一般的な合字と呼ばれています) の他に、「任意合字」、「歴史的合字」、「文脈上の代替合字」などのより専門的なカテゴリーがあります。これらは厳密には合字ではありませんが、特定の文字の組み合わせを置き換えるという点では共通しています。 -<p>Ligatures are glyphs that replace two or more separate glyphs in order to represent them more smoothly (from a spacing or aesthetic perspective). Some of the most common are letters like 'fi', 'fl', or 'ffl' — but there are many other possibilities. There are the most frequent ones (referred to as common ligatures), and there are also more specialized categories like 'discretionary ligatures', 'historical ligatures', and 'contextual alternates'. While these last ones are not technically ligatures, they are generally similar in that they replace specific combinations of letters when they appear together.</p> +スクリプト書体ではよく見られますが、下の例では矢印を作るために使われています。 -<p>While more common in script typefaces, in the below example they are used to create arrows:</p> +{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}} -<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}</div> +### 位置 ({{cssxref("font-variant-position")}}) -<h3 id="位置_cssxreffont-variant-position">位置 ({{cssxref("font-variant-position")}})</h3> +位置の変化形は、植字の上付き文字や下付き文字のグリフを有効にするために使用されます。これらは、ベースラインやラインスペーシングを変更することなく、周囲のテキストと連動するように設計されています。これは {{htmlelement("sub")}} や {{htmlelement("sup")}} 要素を使用した場合と比較して、重要な利点の一つです。 -<p>Position variants are used to enable typographic superscript and subscript glyphs. These are designed to work with the surrounding text without altering the baseline or line spacing. This is one of the key benefits over using the {{htmlelement("sub")}} or {{cssxref("sup")}} elements.</p> +{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}} -<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}</div> +### 大文字 ({{cssxref("font-variant-caps")}}) -<h3 id="大・小文字_cssxreffont-variant-caps">大・小文字 ({{cssxref("font-variant-caps")}})</h3> +OpenType 特性の一般的な使用例の 1 つに、適切なスモールキャップがあります。これは、小文字の中に収まるようにサイズを調整した大文字で、一般的には頭文字や略語に使用されます。 -<p><span class="st">OpenType機能のより一般的な使用例の一つに，小英大文字の適切な使用があります。小英大文字とは，大文字を，小文字列の内でより適切に収まるような大きさにしたものであり，一般に頭文字及び略語に対して用います。</span></p> +{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}} -<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}</div> +### 数字 ({{cssxref("font-variant-numeric")}}) -<h3 id="数字_cssxreffont-variant-numeric">数字 ({{cssxref("font-variant-numeric")}})</h3> +フォントに含まれる数字には、いくつかの種類があります。 -<p>フォントに一般的に含まれる数字には，幾つか異なる様式があります。</p> +- 'Lining' の数字はすべて同じ高さで、同じベースライン上にあります。 +- 'Oldstyle' の数字は高さが混在しており、他の小文字と同様にアセンダーとディセンダーの外観を持つようにデザインされています。これらの数字は、スモールキャップと同様に、数字が周囲の字形と視覚的に調和するように、コピーと一緒にインラインで使用されるように設計されています。 -<ul> - <li>'Lining'〔線引き〕数字は，全ての数字の高さと基底線が揃っています。</li> - <li>'Oldstyle'〔旧式の〕数字は高さが揃っておらず，周囲の小文字と同様のアセンダ及びディセンダを外見に持つよう設計されています。原稿の行内での使用を目的に設計されている為，数字と周囲のグリフとが，<span class="st">小英大文字</span>と似た方式で，視覚的に融和します。</li> -</ul> +また、スペーシングという考え方もあります。プロポーショナルスペーシングは通常の設定で、タビュラースペーシングは文字幅に関係なく数字を均等に並べることができ、財務諸表の数字の表を並べるのに適しています。 -<p>There is also the notion of spacing. Proportional spacing is the normal setting, whereas tabular spacing lines up numerals evenly regardless of character width, making it more appropriate for lining up tables of numbers in financial tables.</p> +このプロパティでは、2 種類の分数がサポートされています。 -<p>本プロパティは二種類の分数に対応しています:</p> +- 斜めに分けられた分数 +- 垂直に積み上げられた分数 -<ul> - <li>斜線分数</li> - <li>縦積み分数</li> -</ul> +序数にも対応しています ('1st' や '3rd' など)。また、フォント内にスラッシュ付きのゼロがある場合は、それにも対応しています。 -<p>序数にも対応しており（「1st」や「3rd」など），斜線付きゼロがフォントに存在するならば数字のゼロはそれになります。</p> +#### Lining と Oldstyle の字形 -<h4 id="線引き及び旧式の数字">線引き及び旧式の数字</h4> +{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}} -<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}</div> +#### 分数、序数、スラッシュ付きのゼロ -<h4 id="分数・序数・及び斜線付きゼロ">分数・序数・及び斜線付きゼロ</h4> +{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}} -<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}</div> +### 東アジアの文字 ({{cssxref("font-variant-east-asian")}}) -<h3 id="東亜_cssxreffont-variant-east-asian">東亜 ({{cssxref("font-variant-east-asian")}})</h3> +これにより、フォント内のさまざまな代替字形にアクセスすることができます。下の例では、OpenType セット 'jis78' のみを有効にした字形の文字列を示しています。下のボックスのチェックを外すと、より多くの文字が表示されます。 -<p>この機能を使ってフォント内の種々の代替形式グリフを参照できます。次の例ではOpenType文字集合'jis78'のみが有効化されたグリフの文字列を示しています。<span class="st">チェック欄のチェックを外すとより多くの文字が表示されます。</span></p> +{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}} -<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}</div> +> **Note:** これらのグリフはフォントサンプルからコピーされたもので、散文を意図したものではありません。 -<div class="note"> -<p><strong>注意</strong>: これらのグリフはフォント見本から複製したものであり，意味を成す文を意図していません。</p> -</div> +### フォントの異体字の一括指定 ({{Cssxref("font-variant")}}) -<h3 id="フォント変種（簡略構文）Cssxreffont-variant">フォント変種（簡略構文）({{Cssxref("font-variant")}})</h3> +これは、上記のすべてを定義するための一括指定構文です。`normal` という値を設定すると、すべてのプロパティが初期値にリセットされます。値を `none` に設定すると、`font-variant-ligatures` を none に設定し、他のすべてのプロパティを初期値に戻します。(つまり、カーニングが既定でオンになっている場合は、ここで `none` の値を与えても、カーニングはオンのままです)。 -<p>This is the shorthand syntax for defining all of the above. Setting a value of <code>normal</code> resets all properties to their initial value. Setting a value of <code>none</code> sets <code>font-variant-ligatures</code> to none and all other properties to their initial value. (Meaning that if kerning is on by default, it will still be on even with a value of <code>none</code> being supplied here.)</p> +{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}} -<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}</div> +## フォント特性の設定 -<h2 id="フォント機能の設定">フォント機能の設定</h2> +{{cssxref("font-feature-settings")}} は、名前の付いた利用可能なすべての OpenType 特性へ明示的にアクセスできる「低水準構文」です。これにより、多くの制御が可能になりますが、継承への影響や、前述したように、1 つの設定を変更したい場合には、文字列全体を再宣言しなければなりません ([CSS カスタムプロパティ](/ja/docs/Web/CSS/Using_CSS_custom_properties)を使用して値を設定している場合を除く)。そのため、可能な限り上記の標準プロパティを使用することをお勧めします。 -<p>{{cssxref("font-feature-settings")}} is the 'low level syntax' that allows explicit access to every named available OpenType feature. This gives a lot of control, but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using <a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS custom properties</a> to set the values). Because of this, it's best to use the standard properties shown above wherever possible.</p> +膨大な数の特性が考えられます。上にいくつかの例を示しましたが、さらに多くの特性を見つけるためのリソースもいくつかあります。 -<p>There a huge number of possible features. You can see examples of a number of them above, and there are several resources available for finding more of them.</p> +一般的な構文は次のようになります。 -<p>The general syntax looks like this:</p> - -<pre class="brush: css">.small-caps { +```css +.small-caps { font-feature-settings: "smcp", "c2sc"; } -</pre> +``` -<p>According to the specification you can either supply just the 4-character feature code or supply a 1 following the code (for enabling that feature) or a 0 (zero) to disable it. This is helpful if you have a feature like ligatures enabled by default but you would like to turn them off, like so:</p> +仕様書によると、4 文字の特性コードだけを指定するか、コードの後に 1 を指定することで特性を有効にすることができ、また、 0 を指定することで特性を無効にすることができます。これは、合字のような既定で有効になっている特性を、次のようにして無効にしておきたい場合に便利です。 -<pre class="brush: css">.no-ligatures { +```css +.no-ligatures { font-feature-settings: "liga" 0, "dlig" 0; -}</pre> +} +``` -<h4 class="brush: css" id="font-feature-settingsプロパティの詳細">font-feature-settingsプロパティの詳細</h4> +#### font-feature-settings のコードについてより詳しく -<ul> - <li class="brush: css"><a href="https://sparanoid.com/lab/opentype-features/">'The Complete CSS Demo for OpenType Features'</a> (can't vouch for the truth of the name, but it's pretty big)</li> - <li><a href="https://en.wikipedia.org/wiki/List_of_typographic_features">A list of OpenType features on Wikipedia</a></li> -</ul> +- ['The Complete CSS Demo for OpenType Features'](https://sparanoid.com/lab/opentype-features/) (can't vouch for the truth of the name, but it's pretty big) +- [A list of OpenType features on Wikipedia](https://en.wikipedia.org/wiki/List_of_typographic_features) -<h2 id="実装に対してCSS機能検出を用いる">実装に対してCSS機能検出を用いる</h2> +## CSS の機能検出を利用した実装 -<p>Since not all properties are evenly implemented, it's good practice to set up your CSS using feature detection to utilize the correct properties, with {{cssxref("font-feature-settings")}} as the fallback.</p> +すべてのプロパティが均等に実装されているわけではないので、CSS を設定するのに機能検出を使用して正しいプロパティを使用できるようにし、{{cssxref("font-feature-settings")}} を代替として使用するのがよいでしょう。 -<p>For example, small caps can be set several ways, but if you want to ensure that no matter what the underlying capitalization is that you end up with everything in small caps, it requires 2 settings with <code>font-feature-settings</code> versus a single property value using {{cssxref("font-variant-caps")}}.</p> +例えば、スモールキャップはいくつかの方法で設定することができますが、基本的な大文字に関わらず、最終的にすべてをスモールキャップにしたい場合は、 {{cssxref("font-variant-caps")}} を使った 1 つのプロパティ値ではなく、`font-feature-settings` を使った 2 つの設定が必要になります。 -<pre class="brush: css">.small-caps { +```css +.small-caps { font-feature-settings: "smcp", "c2sc"; } @@ -194,42 +178,27 @@ translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide font-variant-caps: all-small-caps; } } -</pre> - -<h2 id="関連項目">関連項目</h2> +``` -<h3 id="CSSによるCSSのOpenType機能の実演">CSSによるCSSのOpenType機能の実演</h3> +## 関連情報 -<ul> - <li><a href="https://sparanoid.com/lab/opentype-features/">The Complete CSS Demo for OpenType Features</a></li> -</ul> +### CSS の OpenType 機能の CSS による実演 -<h3 id="Webフォント解析ツール">Webフォント解析ツール</h3> +- [The Complete CSS Demo for OpenType Features](https://sparanoid.com/lab/opentype-features/) -<ul> - <li><a href="https://wakamaifondue.com">Wakamai Fondue</a></li> - <li><a href="https://axis-praxis.org">Axis Praxis</a></li> -</ul> +### ウェブフォント解析ツール -<h3 id="W3C標準">W3C標準:</h3> +- [Wakamai Fondue](https://wakamaifondue.com) +- [Axis Praxis](https://axis-praxis.org) -<ul> - <li><a href="https://drafts.csswg.org/css-fonts-3/#font-rend-props">Font Feature Properties in CSS Fonts Module Level 3</a> +### W3C 標準 - <ul> - <li>〔日本語訳〕<a href="https://triple-underscore.github.io/css-fonts-ja.html#font-rend-desc">CSSフォントモジュール水準3におけるフォント特能プロパティ</a></li> - </ul> - </li> - <li><a href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates">font-variant-alternatives in CSS Fonts Module Level 4</a> - <ul> - <li>〔日本語訳〕<a href="https://triple-underscore.github.io/css-fonts4-ja.html#propdef-font-variant-alternates">CSSフォントモジュール水準4におけるfont-variant-alternatives</a></li> - </ul> - </li> -</ul> +- [Font Feature Properties in CSS Fonts Module Level 3](https://drafts.csswg.org/css-fonts-3/#font-rend-props) + - 〔日本語訳〕[CSS フォントモジュール第 3 水準におけるフォント特性プロパティ](https://triple-underscore.github.io/css-fonts-ja.html#font-rend-desc) +- [font-variant-alternatives in CSS Fonts Module Level 4](https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates) + - 〔日本語訳〕[CSS フォントモジュール第 4 水準における font-variant-alternatives](https://triple-underscore.github.io/css-fonts4-ja.html#propdef-font-variant-alternates) -<h3 id="その他の文献">その他の文献</h3> +## その他の文献 -<ul> - <li><a href="https://helpx.adobe.com/jp/fonts/using/use-open-type-features.html">OpenType機能の使用</a> - アドビ</li> - <li><a href="https://helpx.adobe.com/jp/fonts/using/open-type-syntax.html">CSSでのOpenType機能の構文</a> - アドビ</li> -</ul> +-[OpenType機能の使用](https://helpx.adobe.com/jp/fonts/using/use-open-type-features.html) - アドビ +-[CSSでのOpenType機能の構文](https://helpx.adobe.com/jp/fonts/using/open-type-syntax.html) - アドビ diff --git a/files/ja/web/css/css_fonts/variable_fonts_guide/index.md b/files/ja/web/css/css_fonts/variable_fonts_guide/index.md index f5be8ef59b..32b57c8c37 100644 --- a/files/ja/web/css/css_fonts/variable_fonts_guide/index.md +++ b/files/ja/web/css/css_fonts/variable_fonts_guide/index.md @@ -1,5 +1,5 @@ --- -title: バリアブルフォントガイド +title: 可変フォントガイド slug: Web/CSS/CSS_Fonts/Variable_Fonts_Guide tags: - CSS @@ -10,229 +10,227 @@ tags: - web fonts translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p class="summary"><strong>バリアブルフォント</strong>は幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の {{cssxref("@font-face")}} 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。この記事では、バリアブルフォントの使用を開始するために知っておく必要があるすべての内容を説明します。</p> +**可変フォント** (Variable fonts) は幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の {{cssxref("@font-face")}} 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。この記事では、可変フォントの使用を開始するために知っておく必要があるすべての内容を説明します。 -<div class="warning"> -<p><strong>警告</strong>: OS でバリアブルフォントを使用するには、最新のフォントであることを確認してください。たとえば、Linux 系の OS には最新の Linux Freetype バージョンが必要であり、10.13 より前の macOS はバリアブルフォントに対応していません。OS が最新でない場合、ウェブページや Firefox 開発ツールでバリアブルフォントを使用できません。</p> -</div> +> **Note:** OS で可変フォントを使用するには、最新のフォントであることを確認してください。たとえば、Linux 系の OS には最新の Linux Freetype バージョンが必要であり、10.13 より前の macOS は可変フォントに対応していません。OS が最新でない場合、ウェブページや Firefox 開発ツールで可変フォントを使用できません。 -<h2 id="Variable_Fonts_what_they_are_and_how_they_differ" name="Variable_Fonts_what_they_are_and_how_they_differ">バリアブルフォント: 何であるか、何が違うのか</h2> +## 可変フォント: 何であるか、何が違うのか -<p>バリアブルフォントの違いをよりよく理解するためには、バリアブルでないフォントが何であり、どのように比較するかを確認するのがいいでしょう。</p> +可変フォントの違いをよりよく理解するためには、可変でないフォントが何であり、どのように比較するかを確認するのがいいでしょう。 -<h3 id="Standard_or_Static_fonts" name="Standard_or_Static_fonts">標準 (または静的) フォント</h3> +### 標準 (または静的) フォント -<p>以前は、一つの書体がいくつもの個別のフォントとして作成され、それぞれのフォントが特定の幅/太さ/スタイルの組み合わせを表していました。したがって 'Roboto Regular'、'Roboto Bold'、'Roboto Bold Italic' のように個別のファイルがありました。— すなわち、完全な書体を表すのに 20～30 に及ぶ異なるフォントファイルで表していました (幅の異なる大きな書体の数倍になる場合もありました)。</p> +以前は、一つの書体がいくつもの個別のフォントとして作成され、それぞれのフォントが特定の幅/太さ/スタイルの組み合わせを表していました。したがって 'Roboto Regular'、'Roboto Bold'、'Roboto Bold Italic' のように個別のファイルがありました。— すなわち、完全な書体を表すのに 20 ～ 30 に及ぶ異なるフォントファイルで表していました (幅の異なる大きな書体の数倍になる場合もありました)。 -<p>このようなシナリオでは、サイトで一般的に使用される書体を本文に使用するためには、少なくとも通常、イタリック、太字、太字イタリックの 4 つのファイルが必要になります。キャプションには細字を、強調には太字を、といったように、より多くの太さをを追加したい場合は、さらにいくつかのファイルが必要になります。その結果、HTTP リクエストが多くなり、ダウンロードされるデータも多くなります (通常は 1 ファイルあたり約 20k 以上)。</p> +このようなシナリオでは、サイトで一般的に使用される書体を本文に使用するためには、少なくとも通常、イタリック、太字、太字イタリックの 4 つのファイルが必要になります。キャプションには細字を、強調には太字を、といったように、より多くの太さをを追加したい場合は、さらにいくつかのファイルが必要になります。その結果、HTTP リクエストが多くなり、ダウンロードされるデータも多くなります (通常は 1 ファイルあたり約 20k 以上)。 -<h3 id="Variable_fonts" name="Variable_fonts">バリアブルフォント</h3> +### 可変フォント -<p>バリアブルフォントでは、それらのすべての組み合わせを 1 つのファイルに収めることができます。そのファイルは単一のフォントよりも大きくなりますが、たいていの場合は、本文の表示用に読み込んだ 4 つのファイルよりも小さいか、同じくらいのサイズになります。バリアブルフォントを選択する利点は、以前は別々に読み込んでいたものをいくつかだけに制限されるのではなく、利用可能な太さや幅、スタイルの全範囲にアクセスできることです。</p> +可変フォントでは、それらのすべての組み合わせを 1 つのファイルに収めることができます。そのファイルは単一のフォントよりも大きくなりますが、たいていの場合は、本文の表示用に読み込んだ 4 つのファイルよりも小さいか、同じくらいのサイズになります。可変フォントを選択する利点は、以前は別々に読み込んでいたものをいくつかだけに制限されるのではなく、利用可能な太さや幅、スタイルの全範囲にアクセスできることです。 -<p>これにより、各サイズでの読みやすさを高めるために異なるサイズの見出しを異なる太さで設定したり、データの多い表示には幅をやや狭くしたりするなど、一般的な書体技術が可能になります。比較のために、雑誌の書体システムでは、出版物全体で10～15種類以上の異なる太さと幅の組み合わせを使用するのが一般的で、現在のウェブ上の一般的なスタイルよりもはるかに幅広いスタイルを提供しています (実際にはパフォーマンスの理由だけで実用的です)。</p> +これにより、各サイズでの読みやすさを高めるために異なるサイズの見出しを異なる太さで設定したり、データの多い表示には幅をやや狭くしたりするなど、一般的な書体技術が可能になります。比較のために、雑誌の書体システムでは、出版物全体で 10 ～ 15 種類以上の異なる太さと幅の組み合わせを使用するのが一般的で、現在のウェブ上の一般的なスタイルよりもはるかに幅広いスタイルを提供しています (実際にはパフォーマンスの理由だけで実用的です)。 -<h4 id="A_note_about_font_families_weights_and_variants" name="A_note_about_font_families_weights_and_variants">フォントファミリ、太さ、バリアントについての注意</h4> +#### フォントファミリー、太さ、異体字についての注意 -<p>それぞれの太さやスタイル (太字、イタリック、太字イタリックなど) をブラウザーが合成することに頼るのではなく、個別に特定のフォントファイルを持つという話をしてきたことに気づくかもしれません。その理由は、ほとんどの書体は太字と斜体についてとても特殊なデザインを持っており、その中にはまったく異なる文字が含まれていることが多いからです (例えば、小文字の 'a' と 'g' は斜体ではかなり異なることが多いです)。書体デザインを最も正確に反映させ、ブラウザーによる違いや、異なるスタイルを合成するかどうかの違いを避けるためには、バリアブルではないフォントを使用する場合には、必要な場所に具体的なフォントファイルを読み込む方が正確です。</p> +それぞれの太さやスタイル (太字、イタリック、太字イタリックなど) をブラウザーの合成に頼るのではなく、個別に特定のフォントファイルを持つという話をしてきたことに気づくかもしれません。その理由は、ほとんどの書体は太字と斜体についてとても特殊なデザインを持っており、その中にはまったく異なる文字が含まれていることが多いからです (例えば、小文字の 'a' と 'g' は斜体ではかなり異なることが多いです)。書体デザインを最も正確に反映させ、ブラウザーによる違いや、異なるスタイルを合成するかどうかの違いを避けるためには、可変ではないフォントを使用する場合には、必要な場所に具体的なフォントファイルを読み込む方が正確です。 -<p>また、バリアブルフォントによっては 2 つのファイルに分割されていることに気づくかもしれません。 1 つは直立とそのすべての変化形、もう 1 つはイタリックの変化形を含むファイルです。これは、イタリック体を必要としない場合や使用しない場合に、全体のファイルサイズを小さくするために行われることがあります。いずれの場合も、共通の {{cssxref("font-family")}} 名でそれらをリンクさせることができるので、同じ <code>font-family</code> と適切な {{cssxref("font-style")}} を使ってそれらを呼び出すことができます。</p> +また、可変フォントによっては 2 つのファイルに分割されていることに気づくかもしれません。 1 つは直立とそのすべての変化形、もう 1 つはイタリックの変化形を含むファイルです。これは、イタリック体を必要としない場合や使用しない場合に、全体のファイルサイズを小さくするために行われることがあります。いずれの場合も、共通の {{cssxref("font-family")}} 名でそれらをリンクさせることができるので、同じ `font-family` と適切な {{cssxref("font-style")}} を使ってそれらを呼び出すことができます。 -<h2 id="Introducing_the_variation_axis" name="Introducing_the_variation_axis">「バリエーション軸」の紹介</h2> +## 「バリエーション軸」の紹介 -<p>新しい可変フォントフォーマットの中核をなすのは、書体デザインの特定の側面の許容範囲を記述する<strong>バリエーション軸</strong>の概念です。すなわち、「太さ軸」は書体の太さや細さを表し、「幅軸」は書体の幅が広いか狭いかを表し、「イタリック軸」はイタリック体の書体であるかどうかを表し、それに応じてオン/オフを切り替えることができます。軸は範囲またはバイナリの選択が可能であることに注意してください。重みは 1-999 の範囲ですが、イタリックは単純に 0 か 1 (オフかオンか) です。</p> +新しい可変フォント指定形式の中心となるのは、書体デザインの特定の側面の許容範囲を記述する**バリエーション軸**という概念です。すなわち、「太さ軸」は書体の太さや細さを表し、「幅軸」は書体の幅が広いか狭いかを表し、「イタリック軸」はイタリック体の書体であるかどうかを表し、それに応じてオン/オフを切り替えることができます。軸は範囲またはバイナリーの選択が可能であることに注意してください。重みは 1-999 の範囲ですが、イタリックは単純に 0 か 1 (オフかオンか) です。 -<p>As defined in the specification, there are two kinds of axes: <strong>registered</strong> and <strong>custom</strong>:</p> +仕様書で定義されているように、軸には**登録済み**と**カスタム**の 2 種類があります。 -<ul> - <li> - <p>Registered axes are simply those that are most frequently encountered, and common enough that the authors of the specification felt it was worth standardizing. The five currently registered axes are weight, width, slant, italic, and optical size. The W3C has undertaken mapping them to existing CSS attributes, and in one case introduced a new one, which you'll see below.</p> - </li> - <li> - <p>Custom axes are in fact limitless: the typeface designer can define and scope any axis they like, and are just required to give it a four-letter <strong>tag</strong> to identify it within the font file format itself. You can use these four-letter tags in CSS to specify a point along that axis of variation, as will be show in the code examples below.</p> - </li> -</ul> +- 登録済みの軸は、もっとも頻繁に遭遇するもので、仕様書の著者が標準化する価値があると感じるほど一般的なものです。現在登録されている軸は、太さ、幅、斜体、イタリック、オプティカルサイズの 5 つです。W3C では、これらの軸を既存の CSS 属性に対応付けることを試みましたが、あるケースでは下記の通り、新しい軸を導入しました。 +- カスタム軸には制限がありません。書体デザイナーは、好きな軸を定義して範囲を指定することができ、フォントファイルの形式内でそれを識別するために 4 文字の**タグ**を与えればよいのです。この 4 文字のタグを CSS で使用することで、以下のコード例のように、バリエーションの軸に沿って位置を指定することができます。 -<h3 id="Registered_axes_and_existing_CSS_attributes" name="Registered_axes_and_existing_CSS_attributes">登録済みの軸と既存の CSS 属性</h3> +### 登録済みの軸と既存の CSS 属性 -<p>In this section we'll demonstrate the five registered axes defined with examples and the corresponding CSS. Where possible, both the standard and lower-level syntax are included. The lower-level syntax ({{cssxref("font-variation-settings")}}) was the first mechanism implemented in order to test the early implementations of variable font support, and is necessary to utilize new or custom axes beyond the five registered ones. However, the W3C’s intent was for this syntax not to be used when other attributes are available. Therefore wherever possible, the appropriate property should be used, with the lower-level syntax of <code>font-variation-settings</code> only being used to set values or axes not available otherwise.</p> +この節では、例で定義された 5 つの登録軸と、それに対応する CSS を紹介します。可能な限り、標準の構文と低水準の構文の両方を掲載しています。低水準の構文 ({{cssxref("font-variation-settings")}}) は、可変フォントに対応する初期の実装をテストするために実装された最初のメカニズムであり、登録された 5 つの軸以外の新しい軸やカスタム軸を利用するために必要です。しかし、W3C は他の属性が利用できる場合には、この構文を使用しないよう意図していました。したがって、可能な限り、適切なプロパティを使用するべきであり、`font-variation-settings` の低水準の構文は、他では利用できない値や軸を設定するためにのみ使用してください。 -<h4 id="Notes" name="Notes">注</h4> +#### メモ -<ol> - <li> - <p>When using <code>font-variation-settings</code> it is important to note that axis names are case-sensitive. The registered axis names must be in lower case, and custom axes must be in upper case. For example:</p> +1. `font-variation-settings` を使用する際には、軸名の大文字と小文字が区別されることに注意する必要があります。登録済みの軸名は小文字で、カスタム軸は大文字でなければなりません。例えば、以下のようになります。 - <pre class="brush: css notranslate">font-variation-settings: 'wght' 375, 'GRAD' 88;</pre> + ```css + font-variation-settings: 'wght' 375, 'GRAD' 88; + ``` - <p><code>wght</code> (weight) is a registered axis, and <code>GRAD</code> (grade) is a custom one.</p> - </li> - <li> - <p>If you have set values using <code>font-variation-settings</code> and want to change one of those values, you must redeclare all of them (in the same way as when you set OpenType font features using {{cssxref("font-feature-settings")}}). You can work around this limitation by using <a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS Custom Properties</a> (CSS variables) for the individual values, and simply modifying the value of an individual custom property. Example code follows at the end of the guide.</p> - </li> -</ol> + `wght` (太さ) は登録済みの軸で、`GRAD` (等級) はカスタム軸です。 -<h3 id="Weight" name="Weight">太さ</h3> +2. `font-variation-settings` を使って値を設定していて、そのうちの 1 つの値を変更したい場合は、すべての値を再宣言しなければなりません ({{cssxref("font-feature-settings")}} を使って OpenType フォントの特性を設定したときと同じ方法です)。この制限を回避するには、個々の値に [CSS カスタムプロパティ](/ja/docs/Web/CSS/Using_CSS_custom_properties) (CSS 変数)を使用し、個々のカスタムプロパティの値を変更してください。ガイドの最後にサンプルコードを掲載しています。 -<p>Weight (represented by the <code>wght</code> tag) defines the design axis of how thin or thick (light or heavy, in typical typographic terms) the strokes of the letterforms can be. For a long time in CSS there has existed the ability to specify this via the {{cssxref("font-weight")}} property, which takes numeric values ranging from 100 to 900 in increments of 100, and keywords like <code>normal</code> or <code>bold</code>, which are simply aliases for their corresponding numeric values (400 and 700 in this case). These are still applied when dealing with non-variable or variable fonts, but with variable ones, any number from 1 to 1000 is now valid.</p> +### 太さ (Weight) -<p>It should be noted that at this point there is no way in the <code>@font-face</code> declaration to 'map' a specific point on the variation axis of a variable font to the keyword <code>bold</code> (or any other keyword). This can generally be resolved fairly easily, but does require an extra step in writing your CSS:</p> +太さ (`wght` タグで表される) は、文字の角をどれだけ細く、あるいは太く (植字用語でいうところのライト、ヘビー) できるかというデザイン上の軸を定義するものです。CSS では長い間、{{cssxref("font-weight")}} プロパティを使ってこれを指定する機能がありました。このプロパティは 100 から 900 までの 100 刻みの数値を取り、`normal` や `bold` といったキーワードは、対応する数値 (この場合は 400 と 700) の別名です。これらは、非可変フォントや可変フォントを扱うときにも適用されますが、可変フォントの場合は、1 から 1000 までの任意の数値が有効になります。 -<pre class="brush: css notranslate">font-weight: 375; +現時点では、`@font-face` 宣言の中で、可変フォントの変動する軸上の特定の点をキーワード `bold` (またはその他のキーワード) に「対応付け」する方法がないことに注意してください。これは一般的に非常に簡単に解決することができますが、CSS を書く際に余分なステップが必要になります。 -font-variation-settings: 'wght' 375;</pre> +```css +font-weight: 375; -<p>The following live example's CSS can be edited to allow you to play with font weight values.</p> +font-variation-settings: 'wght' 375; +``` -<div>{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}</div> +次のライブ例の CSS を編集することで、font-weight の値を操作することができます。 -<h3 id="Width" name="Width">幅</h3> +{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}} -<p>Width (represented by the <code>wdth</code> tag) defines the design axis of how narrow or wide (condensed or extended, in typographic terms) the letterforms can be. This is typically set in CSS using the {{cssxref("font-stretch")}} property, with values expressed as a percentage above or below ‘normal’ (100%), any number greater than 0 is technically valid—though it is far more likely that the range would fall closer to the 100% mark, such as 75%-125%. If a number value supplied is outside the range encoded in the font, the browser should render the font at the closest value allowed.</p> +### 幅 (Width) -<div class="note"> -<p><strong>注</strong>: The % symbol is not used when utilizing <code>font-variation-settings</code>.</p> -</div> +幅 (`wdth` タグで表される) は、文字の幅をどれだけ狭くするか、あるいは広くするか (植字用語でいう condensed または extended) というデザイン上の軸を定義します。これは通常、CSS で {{cssxref("font-stretch")}} プロパティを使用して設定され、値は「通常」(100%) の上または下のパーセント値で表されます。与えられた数値がフォントにエンコードされた範囲外である場合、ブラウザーは許容される最も近い値でフォントをレンダリングしなければなりません。 -<pre class="brush: css notranslate">font-stretch: 115%; +> **Note:** % 記号は `font-variation-settings` を使用する上では不要です。 + +```css +font-stretch: 115%; font-variation-settings: 'wdth' 115; -</pre> +``` -<p>The following live example's CSS can be edited to allow you to play with font width values.</p> +次のライブ例の CSS を編集することで、フォントの幅の値を変更することができます。 -<div>{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}</div> +{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}} -<h3 id="Italic" name="Italic">イタリック</h3> +### イタリック (Italic) -<p>The Italic (<code>ital</code>) axis works differently in that it is either on or off; there is no in-between. Italic designs often include dramatically different letterforms from their upright counterparts, so in the transition from upright to italic, a number of glyph (or character) substitutions usually occur. Italic and oblique are often used somewhat interchangeably, but in truth are actually quite different. Oblique is defined in this context with the term <code>slant</code> (see the below section), and a typeface would typically have one or the other, but not both.</p> +イタリック (`ital`) 軸は、オンかオフのどちらかであるという点で動作が異なり、その中間はありません。イタリックのデザインには、正立のデザインとは大きく異なる字形が含まれていることが多く、正立からイタリックへの移行の際には、通常、いくつかのグリフ (または文字) の置換が行われます。イタリックと斜体は同じように使われることが多いのですが、実際には全く異なるものです。斜体はこの文脈では `slant` という用語で定義されており (下の節を参照)、書体は通常どちらか一方を持ちますが、両方を持つことはありません。 -<p>In CSS, both italic and oblique are applied to text using the {{cssxref("font-style")}} property. Also note the introduction of <code>font-synthesis: none;</code>—which will prevent browsers from accidentally applying the variation axis and a synthesized italic. This can be used to prevent faux-bolding as well.</p> +CSS では、{{cssxref("font-style")}} プロパティを使用して、イタリックと斜体の両方をテキストに適用します。 また、`font-synthesis: none;` が導入され、ブラウザーが誤って変動軸と合成されたイタリックを適用するのを防ぐことができます。これは、擬似太字を防ぐためにも使用できます。 -<pre class="brush: css notranslate">font-style: italic; +```css +font-style: italic; font-variation-settings: 'ital' 1; -font-synthesis: none;</pre> +font-synthesis: none; +``` -<p>The following live example's CSS can be edited to allow you to play with font italics.</p> +次のライブ例の CSS を編集することで、フォントのイタリックを遊べるようになります。 -<div>{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}</div> +{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}} -<h3 id="Slant" name="Slant">傾き</h3> +### 斜体 (Slant) -<p>Slant (represented by the <code>slnt</code> tag), or as it's often referred to, 'oblique' — is different to true italics in that it changes the angle of the letterforms but doesn’t perform any kind of character substitution. It is also variable, in that it is expressed as a numeric range. This allows the font to be varied anywhere along that axis. The allowed range is generally 0 (upright) to 20 degrees — any number value along that range can be supplied, so the font can be slanted just a tiny bit. However, any value from -90–90 degrees is valid.</p> +斜体 (`slnt`タグで表される) は、または 'oblique' とも良く呼ばれますが、文字の角度を変えるという点で真のイタリックとは異なりますが、何らかの文字の置換を行うわけではありません。また、数値の範囲で表現されるという点で、可変性があります。これにより、フォントをその軸に沿ってどこでも変化させることができます。許容される範囲は通常 0 (直立) から 20 度で、その範囲内の任意の数値を与えることができるので、フォントをほんの少しだけ斜めにすることができます。ただし、-90 〜 90 度の範囲であれば、どのような値でも有効です。 -<div class="note"> -<p><strong>注</strong>: The <code>deg</code> keyword is not used when utilizing <code>font-variation-settings</code>.</p> -</div> +> **Note:** `deg` キーワードは `font-variation-settings` を使用する上では不要です。 -<pre class="brush: css notranslate">font-style: oblique 14deg; +```css +font-style: oblique 14deg; -font-variation-settings: 'slnt' 14;</pre> +font-variation-settings: 'slnt' 14; +``` -<p>The following live example's CSS can be edited to allow you to play with font slant/oblique values.</p> +次のライブ例の CSS を編集することで、フォントの斜体の値を変更することができます。 -<div>{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}</div> +{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}} -<h3 id="Optical_size" name="Optical_size">Optical size</h3> +### オプティカルサイズ -<p>This is something new to digital fonts and CSS, but is actually a centuries-old technique in designing and creating metal type. Optical sizing refers to the practice of varying the overall stroke thickness of letterforms based on physical size. If the size was very small (such as an equivalent to 10 or 12px), the characters would have an overall thicker stroke, and perhaps other small modifications to ensure that it would reproduce and be readable at a physically smaller size. Conversely, when a much larger size was being used (like 48 or 60px), there might be much greater variation in thick and thin stroke weights, showing the typeface design more in line with the original intent.</p> +これは、デジタルフォントや CSS にとっては目新しいことですが、金属製の活字をデザイン・制作する上では何世紀も前からある技術です。オプティカルサイズとは、物理的なサイズに基づいて、文字の全体的なストロークの太さを変化させる手法のことです。サイズがとても小さい場合 (例えば 10 または 12px に相当)、文字は全体的に太いストロークを持ち、物理的に小さいサイズでも再現して読めるように、おそらくその他の小さな修正が加えられます。逆に、48 や 60px のような大きなサイズの場合は、ストロークの太さや細さに大きなバリエーションがあり、本来の意図に沿った書体デザインになっているかもしれません。 -<p>While this was originally done to compensate for the ink and paper printing process (very thin lines at small sizes often didn’t print, giving the letterforms a broken appearance), it translates well to digital displays when compensating for screen quality and physical size rendering.</p> +これは元々、インクと紙の印刷プロセスを補正するために行われたものですが (小さな文字ではとても細い線がかすれてしまうことが多く、字形が壊れているように見える)、スクリーンの品質や物理的な大きさのレンダリングを補正する際には、デジタルディスプレイにもうまく適用されます。 -<p>Optical size values are generally intended to be automatically applied corresponding to <code>font-size</code>, but can also be manipulated using the lower-level <code>font-variation-settings</code> syntax.</p> +オプティカルサイズの値は、一般的には `font-size` に対応して自動的に適用されるべきですが、低レベルの `font-variation-settings` 構文を使用して操作することもできます。 -<p>There is a new attribute, {{cssxref("font-optical-sizing")}}, created to support variable fonts in CSS. When using <code>font-optical-sizing</code>, the only allowed values are <code>auto</code> or <code>none</code> — so this attribute only allows for turning optical sizing on or off. However when using <code>font-variation-settings: 'opsz' <num></code>, you can supply a numeric value. In most cases you would want to match the <code>font-size</code> (the physical size the type is being rendered) with the <code>opsz</code> value (which is how optical sizing is intended to be applied when using <code>auto</code>). The option to provide a specific value is provided so that should it be necessary to override the default — for legibility, aesthetic, or some other reason — a specific value can be applied.</p> +CSS で可変フォントに対応するために、{{cssxref("font-optical-sizing")}} という新しい属性が作成されました。`font-optical-sizing` を使用する場合、許可される値は `auto` または `none` だけです。つまり、この属性はオプティカルサイズのオン/オフのみを可能にします。しかし、`font-variation-settings: 'opsz' <num>` を使用する場合には、数値を指定することができます。ほとんどの場合、`font-size` (文字がレンダリングされる物理的な大きさ) と一致する `opsz` の値を使用することになるでしょう (これは、`auto` を使用しているときに適用されるオプティカルサイズです)。読みやすさや美しさなどの理由で既定値を上書きする必要がある場合は、特定の値を適用できるようになっています。 -<pre class="brush: css notranslate">font-optical-sizing: auto; +```css +font-optical-sizing: auto; -font-variation-settings: 'opsz' 36;</pre> +font-variation-settings: 'opsz' 36; +``` -<p>The following live example's CSS can be edited to allow you to play with optical size values.</p> +次のライブ例の CSS を編集することで、オプティカルサイズをを変更することができます。 -<div>{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}</div> +{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}} -<h3 id="Custom_axes" name="Custom_axes">カスタム軸</h3> +### カスタム軸 -<p>Custom axes are just that: they can be any axis of design variation that the typeface designer imagines. There may be some that become fairly common — or even become registered — but only time will tell.</p> +カスタム軸とは、書体デザイナーが思い描くデザインバリエーションの軸のことです。もしかしたら、既に一般的になっていたり、登録されたりするものもあるかもしれませんが、それは時間の問題です。 -<h3 id="Grade" name="Grade">グレード</h3> +### 等級 (Grade) -<p>Grade may become one of the more common custom axes as it has a known history in typeface design. The practice of designing different grades of a typeface was often done in reaction to intended use and printing technique. The term 'grade' refers to the relative weight or density of the typeface design, but differs from traditional 'weight' in that the physical space the text occupies does not change, so changing the text grade doesn't change the overall layout of the text or elements around it. This makes grade a useful axis of variation as it can be varied or animated without causing reflow of the text itself.</p> +等級は書体デザインの歴史の中で知られており、より一般的なカスタム軸の一つになるかもしれません。ある書体の異なる等級をデザインすることは、使用目的や印刷技術に応じて行われることが多かったのです。'grade' という言葉は、書体デザインの相対的な太さや濃さを意味しますが、従来の「太さ」とは異なり、テキストが占める物理的な空間は変化しないため、テキストの等級を変えても、テキストやその周りの要素の全体的なレイアウトが変わることはありません。これにより、等級は、テキスト自体の再フローを引き起こすことなく、変化やアニメーションを行うことができるバリエーションの軸として有効です。 -<pre class="brush: css notranslate">font-variation-settings: 'GRAD' 88;</pre> +```css +font-variation-settings: 'GRAD' 88; +``` -<p>The following live example's CSS can be edited to allow you to play with font grade values.</p> +次のライブ例の CSS を編集することで、等級の値をを変更することができます。 -<div>{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}</div> +{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}} -<h3 id="Using_a_variable_font_font-face_changes" name="Using_a_variable_font_font-face_changes">バリアブルフォントの使用: @font-face の変更</h3> +### 可変フォントの使用: @font-face の変更 -<p>The syntax for loading variable fonts is very similar to any other web font, with a few notable differences, which are provided via upgrades to the traditional {{cssxref("@font-face")}} syntax now available in modern browsers.</p> +可変フォントを読み込むための構文は、他のウェブフォントと非常によく似ていますが、いくつかの注目すべき違いがあり、それらはモダンブラウザーで利用可能な従来の {{cssxref("@font-face")}} 構文を拡張する形で提供されています。 -<p>The basic syntax is the same, but the font technology can be specified, and allowable ranges for descriptors like <code>font-weight</code> and <code>font-stretch</code> can be supplied, rather than named according to the font file being loaded.</p> +基本的な構文は同じですが、フォントの技術を指定することができ、読み込まれるフォントファイルに応じた名前ではなく、`font-weight` や `font-stretch` などの記述子の許容範囲を指定することができます。 -<h4 id="Example_for_a_standard_upright_Roman_font" name="Example_for_a_standard_upright_Roman_font">標準の直立の (ローマン) フォントの例</h4> +#### 標準の直立の (ローマン) フォントの例 -<pre class="brush: css notranslate">@font-face { +```css +@font-face { font-family: 'MyVariableFontName'; - src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); + src: url('path/to/font/file/myvariablefont.woff2') format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; - font-style: normal; + font-style: normal; } -</pre> +``` -<h4 id="Example_for_a_font_that_includes_both_upright_and_italics" name="Example_for_a_font_that_includes_both_upright_and_italics">Example for a font that includes both upright and italics:</h4> +#### 直立とイタリックの両方を含むフォントの例 -<pre class="brush: css notranslate">@font-face { +```css +@font-face { font-family: 'MyVariableFontName'; - src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); + src: url('path/to/font/file/myvariablefont.woff2') format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; - font-style: oblique 0deg 20deg; -}</pre> + font-style: oblique 0deg 20deg; +} +``` -<div class="note"> -<p><strong>注:</strong> there is no set specific value for the upper-end degree measurement in this case; they simply indicate that there is an axis so the browser can know to render upright or italic (remember that italics are only on or off)</p> -</div> +> **Note:** この例では、上限の度数に特定の値が設定されていませんが、軸があることを示すことで、ブラウザーが直立かイタリックかを判断できるようになっています (イタリックはオンかオフしかないことを思い出してください)。 -<h4 id="Example_for_a_font_that_contains_only_italics_and_no_upright_characters" name="Example_for_a_font_that_contains_only_italics_and_no_upright_characters">Example for a font that contains only italics and no upright characters:</h4> +#### イタリック体のみを含み、直立文字を含まないフォントの例 -<pre class="brush: css notranslate">@font-face { +```css +@font-face { font-family: 'MyVariableFontName'; - src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); + src: url('path/to/font/file/myvariablefont.woff2') format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; - font-style: italic; -}</pre> + font-style: italic; +} +``` -<h4 id="Example_for_a_font_that_contains_an_oblique_slant_axis" name="Example_for_a_font_that_contains_an_oblique_slant_axis">Example for a font that contains an oblique (slant) axis:</h4> +#### 斜体軸を含むフォントの例 -<pre class="brush: css notranslate">@font-face { +```css +@font-face { font-family: 'MyVariableFontName'; - src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); + src: url('path/to/font/file/myvariablefont.woff2') format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; - font-style: oblique 0deg 12deg; -}</pre> + font-style: oblique 0deg 12deg; +} +``` -<div class="note"> -<p><strong>注</strong>: Not all browsers have implemented the full syntax for font format, so test carefully. All browsers that support variable fonts will still render them if you set the format to just the file format, rather than format-variations (i.e. <code>woff2</code> instead of <code>woff2-variations</code>), but it’s best to use the proper syntax if possible.</p> -</div> +> **Note:** すべてのブラウザーがフォント指定形式の完全な構文を実装しているわけではないので、慎重にテストしてください。可変フォントに対応しているブラウザーはすべて、形式を format-variations ではなく、ファイル形式だけに設定してもレンダリングされますが (例：`woff2-variations` ではなく `woff2`)、可能であれば適切な構文を使用することをお勧めします。 -<div class="note"> -<p><strong>注</strong>: Supplying value ranges for <code>font-weight</code>, <code>font-stretch</code>, and <code>font-style</code> will keep the browser from attempting to render an axis outside that range if you are using the appropriate attribute (i.e. <code>font-weight</code> or <code>font-stretch</code>), but will not block you from supplying an invalid value via <code>font-variation-settings</code>, so use with care.</p> -</div> +> **Note:** `font-weight`, `font-stretch`, `font-style` に値の範囲を指定した場合は、適切な属性 (すなわち `font-weight` や `font-stretch`) を使用していると、ブラウザーがその範囲外の軸をレンダリングしようとしないようにしますが、`font-variation-settings` で無効な値を指定した場合には、それを阻止することはできませんので注意して使用してください。 -<h2 id="Working_with_older_browsers" name="Working_with_older_browsers">古いブラウザーでの作業</h2> +## 古いブラウザーでの作業 -<p>Variable font support can be checked with CSS Feature Queries (see {{cssxref("@supports")}}), so it's possible to use variable fonts in production and scope the CSS calling the variable fonts inside a feature query block.</p> +可変フォントの対応状況は、CSS 機能クエリーで確認できます ({{cssxref("@supports")}} を参照)。そのため、本番で可変フォントを使用し、可変フォントを呼び出す CSS を機能クエリーブロック内に限定することができます。 -<pre class="brush: css notranslate">h1 { +```css +h1 { font-family: some-non-variable-font-family; } @@ -240,23 +238,22 @@ font-variation-settings: 'opsz' 36;</pre> h1 { font-family: some-variable-font-family; } -}</pre> +} +``` -<h2 id="Sample_pages" name="Sample_pages">サンプルページ</h2> +## サンプルページ -<p>The following example pages show two different ways to structure your CSS. The first uses the standard attributes wherever possible. The second example uses CSS Custom Properties to set values for a <code>font-variation-settings</code> string, and shows how you can more easily update single variable values by overriding a single variable rather than rewriting the whole string. Note the hover effect on the <code>h2</code>, which only alters the grade axis custom property value.</p> +以下のサンプルページでは、CSS を構成する 2 つの異なる方法を示しています。最初の例では、可能な限り標準の属性を使用しています。2 つ目の例では、CSS カスタムプロパティを使用して、`font-variation-settings` の文字列に値を設定し、文字列全体を書き換えるのではなく、単一の変数をオーバーライドすることで、単一の変数の値をより簡単に更新する方法を示しています。`h2` のホバー効果に注目してください。これは等級軸のカスタムプロパティ値を変更しているだけです。 -<div>{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}</div> +{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}} -<h2 id="Resources" name="Resources">リソース</h2> +## 参考文献 -<ul> - <li><a href="https://drafts.csswg.org/css-fonts-4">W3C CSS Fonts Module 4 Specification</a> (editor’s draft)</li> - <li><a href="https://github.com/w3c/csswg-drafts/issues">W3C Github issue queue</a></li> - <li><a href="https://docs.microsoft.com/en-us/typography/opentype/spec/otvaroverview">Microsoft Open Type Variations introduction</a></li> - <li><a href="https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg">Microsoft OpenType Design-Variation Axis Tag Registry</a></li> - <li><a href="https://wakamaifondue.com">Wakamai Fondue</a> (a site that will tell you what your font can do via a simple drag-and-drop inspection interface)</li> - <li><a href="https://www.axis-praxis.org">Axis Praxis</a> (the original variable fonts playground site)</li> - <li><a href="https://v-fonts.com">V-Fonts.com</a> (a catalog of variable fonts and where to get them)</li> - <li><a href="https://play.typedetail.com">Font Playground</a> (another playground for variable fonts with some very unique approaches to user interface)</li> -</ul> +- [W3C CSS Fonts Module 4 Specification](https://drafts.csswg.org/css-fonts-4) (編集者草稿) +- [W3C Github issue queue](https://github.com/w3c/csswg-drafts/issues) +- [Microsoft Open Type Variations introduction](https://docs.microsoft.com/en-us/typography/opentype/spec/otvaroverview) +- [Microsoft OpenType Design-Variation Axis Tag Registry](https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg) +- [Wakamai Fondue](https://wakamaifondue.com) (ドラッグ＆ドロップで簡単にフォントの特性を調べることができるサイト) +- [Axis Praxis](https://www.axis-praxis.org) (オリジナル可変フォントの遊び場サイト) +- [V-Fonts.com](https://v-fonts.com) (可変フォントのカタログとその入手先) +- [Font Playground](https://play.typedetail.com) (ユーザーインターフェイスに非常に独特なアプローチを持つ、可変フォントのもう一つの遊び場。) |