Documentation CSS

この記事で学べること

  • font-paletteプロパティの概念と目的
  • カラーフォントのパレット指定方法
  • light、dark、defaultの各値の使い分け
  • カスタムパレットの設定
  • ブラウザサポートの確認

概要

CSSのfont-paletteプロパティは、カラーフォント（多色フォント）で使用されるカラーパレットを指定して、フォントの色をカスタマイズするために使用されます。従来のCSSではテキストの色は一色しか指定できませんでしたが、カラーフォントとfont-paletteを使うことで、複数の色で構成されたフォントのスタイリングが簡単に可能になります。

font-paletteの基本構文

selector {
  font-palette: palette;
}
  • palette
    使用するカラーパレットを指定します。一般的に、light、dark、default、customなどのパレット名が使われます。

使用例

基本的な使用例 - カラーフォントのパレットを指定する

以下の例では、font-paletteを使って、カラーフォントの色を変更しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>font-paletteの使用例</title>
    <style>
      @font-face {
        font-family: "MyColorFont";
        src: url("path/to/color-font.woff2") format("woff2");
        font-palette: default; /* デフォルトパレットを使用 */
      }
      .text-default {
        font-family: "MyColorFont";
        font-palette: default; /* デフォルトのカラーパレット */
      }
      .text-light {
        font-family: "MyColorFont";
        font-palette: light; /* 明るい色合いのパレット */
      }
      .text-dark {
        font-family: "MyColorFont";
        font-palette: dark; /* 暗い色合いのパレット */
      }
    </style>
  </head>
  <body>
    <p class="text-default">これはデフォルトのカラーパレットです。</p>
    <p class="text-light">これは明るい色のカラーパレットです。</p>
    <p class="text-dark">これは暗い色のカラーパレットです。</p>
  </body>
</html>

解説

この例では、@font-faceを使用してカラーフォントを定義し、異なるパレットでの色指定を行っています。font-palette: defaultはフォントのデフォルトパレットを使用し、font-palette: lightやfont-palette: darkで他の色のパレットを選択しています。これにより、同じフォントであっても、異なる色合いのバリエーションが可能です。

応用例 - カスタムパレットの使用

font-paletteプロパティは、カスタムパレットも設定できます。フォントによっては、開発者が独自のカラーパレットを提供し、それを選択することもできます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>カスタムパレットの使用例</title>
    <style>
      @font-face {
        font-family: "MyCustomColorFont";
        src: url("path/to/custom-color-font.woff2") format("woff2");
        font-palette: default; /* デフォルトパレット */
      }
      .custom-palette {
        font-family: "MyCustomColorFont";
        font-palette: custom; /* カスタムパレットを使用 */
      }
    </style>
  </head>
  <body>
    <p class="custom-palette">これはカスタムカラーパレットです。</p>
  </body>
</html>

解説

この例では、font-palette: customを指定して、フォントで定義されたカスタムパレットを使用しています。カラーフォントが独自のパレットを提供している場合、それを指定することで自由にフォントの色を操作できます。

font-paletteの注意点

  • フォントのサポート状況
    font-paletteは、指定したフォントが対応するカラーパレットを持っている場合にのみ機能します。全てのフォントがカラーパレットをサポートしているわけではないため、事前に確認が必要です。
  • ブラウザの互換性
    すべてのブラウザがfont-paletteを完全にサポートしているわけではありません。特に古いブラウザでは、このプロパティが動作しない可能性があります。必要に応じてフォールバックのスタイル設定を検討してください。
  • パレット名の確認
    フォントによっては、提供されるパレットの名前が異なる場合があります。フォントのドキュメントや仕様を確認して、適切なパレット名を使用する必要があります。

まとめ

font-paletteプロパティを使うことで、CSSからカラーフォントの色を簡単に変更することができます。デフォルトパレットだけでなく、明るい・暗いパレットやカスタムパレットを使用することで、テキストデザインの幅が広がります。特にカラーフォントを活用したビジュアルデザインが求められる場面で、非常に有効なプロパティです。ブラウザサポートやフォントの対応状況を考慮しつつ、積極的に活用してみましょう。

ポイントの振り返り

値説明使用例
normalデフォルトパレット標準表示
light明るい色合いライトテーマ
dark暗い色合いダークテーマ
<palette-identifier>カスタムパレット独自の色設定

関連プロパティ

プロパティ説明
@font-palette-valuesカスタムパレットの定義
colorテキストの色
@font-faceフォントの定義

参考文献

円