font_modify フィルター（フォント装飾変更）

{
  "category": "font",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "The `font_modify` filter requires two parameters. The first indicates which property should be modified and the second is\neither the new value, or modification amount, for that property.\n\n> Tip:\n> You can access every variant of the chosen font's family by using [`font.variants`](/docs/api/liquid/objects/font#font-variants).\n> However, you can more easily access specific styles and weights by using the `font_modify` filter.\n\nThe following table outlines the valid font properties and modification values:\n\n<table>\n  <thead>\n    <th>Property</th>\n    <th>Modification value</th>\n    <th>Output</th>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan=3><code>style</code></td>\n      <td><code>normal</code></td>\n      <td>Returns the normal variant of the same weight, if it exists.</td>\n    </tr>\n    <tr>\n      <td><code>italic</code></td>\n      <td>Returns the italic variant of the same weight, if it exists.</td>\n    </tr>\n    <tr>\n      <td><code>oblique</code></td>\n      <td>\n        <p>Returns the oblique variant of the same weight, if it exists.</p>\n        <p>Oblique variants are similar to italic variants in appearance. All Shopify fonts have only oblique or italic variants, not both.</p>\n      </td>\n    </tr>\n    <tr>\n      <td rowspan=7><code>weight</code></td>\n      <td><code>100</code> → <code>900</code></td>\n      <td>Returns a variant of the same style with the given weight, if it exists.</td>\n    </tr>\n    <tr>\n      <td><code>normal</code></td>\n      <td>Returns a variant of the same style with a weight of <code>400</code>, if it exists.</td>\n    </tr>\n    <tr>\n      <td><code>bold</code></td>\n      <td>Returns a variant of the same style with a weight of <code>700</code>, if it exists.</td>\n    </tr>\n    <tr>\n      <td><code>+100</code> → <code>+900</code></td>\n      <td>\n        <p>Returns a variant of the same style with a weight incremented by the given value, if it exists.</p>\n        <p>For example, if a font has a weight of <code>400</code>, then using <code>+100</code> would return the font with a weight of <code>500</code>.</p>\n      </td>\n    </tr>\n    <tr>\n      <td><code>-100</code> → <code>-900</code></td>\n      <td>\n        <p>Returns a variant of the same style with a weight decremented by the given value, if it exists.</p>\n        <p>For example, if a font has a weight of <code>400</code>, then using <code>-100</code> would return the font with a weight of <code>300</code>.</p>\n      </td>\n    </tr>\n    <tr>\n      <td><code>lighter</code></td>\n      <td>Returns a lighter variant of the same style by applying the rules used by the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Meaning_of_relative_weights\">CSS <code>font-weight</code> property</a> and browser <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Fallback_weights\">fallback weights</a>, if it exists.</td>\n    </tr>\n    <tr>\n      <td><code>bolder</code></td>\n      <td>Returns a bolder variant of the same style by applying the rules used by the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Meaning_of_relative_weights\">CSS <code>font-weight</code> property</a> and browser <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Fallback_weights\">fallback weights</a>, if it exists.</td>\n    </tr>\n  </tbody>\n</table>",
  "parameters": [
    {
      "description": "Font property to modify",
      "name": "property",
      "positional": true,
      "required": true,
      "types": [
        "string"
      ]
    },
    {
      "description": "The new value for the associated property.",
      "name": "value",
      "positional": true,
      "required": true,
      "types": [
        "string"
      ]
    }
  ],
  "return_type": [
    {
      "type": "font",
      "name": "",
      "description": "",
      "array_value": ""
    }
  ],
  "examples": [
    {
      "name": "",
      "description": "",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{%- assign bold_font = settings.type_body_font | font_modify: 'weight', 'bold' -%}\n\nh2 {\n  font-weight: {{ bold_font.weight }};\n}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": false
    },
    {
      "name": "Non-existent font variants",
      "description": "If the `font_modify` filter tries to create a font variant that doesn't exist, then it returns `nil`. To handle this, you can either assign a fallback value with the [`default` filter](/docs/api/liquid/filters/default), or check for `nil` before using the variant.\n",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{%- assign bold_font = settings.type_body_font | font_modify: 'weight', 'bold' -%}\n{%- assign italic_font = settings.type_body_font | font_modify: 'style', 'italic' -%}\n{%- assign heavy_font = settings.type_body_font | font_modify: 'weight', '900' | default: bold_font -%}\n{%- assign oblique_font = settings.type_body_font | font_modify: 'style', 'oblique' | default: italic_font -%}\n\nh2 {\n  font-style: {{ heavy_font.weight }};\n}\n\n.italic {\n  {% if oblique_font -%}\n    font-style: {{ oblique_font.style }};\n  {%- else -%}\n    font-style: {{ italic_font.style }};\n  {%- endif %}\n}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": false
    }
  ],
  "summary": "Modifies a specific property of a given font.",
  "syntax": "font | font_modify: string, string",
  "name": "font_modify"
}