Font filters

Schriftfilter werden auf font Objekten aufgerufen. Sie können Schriftfilter verwenden, um Schriftarten zu laden oder um Schriftvarianten zu erhalten.

In der Schriftartenbibliothek von VersaCommerce finden Sie eine Liste aller Schriftarten und ihrer Varianten.

Inhalt

font_modify
Handling font variants
font_face
Additional properties
font_url

font_modify

font_modify benötigt zwei Argumente. Die erste gibt an, welche Eigenschaft geändert werden soll, und die zweite ist die vorzunehmende Änderung.

Sie können zwar auf jede Variante der gewählten Schriftfamilie zugreifen, indem Sie font. variantszugreifen können, können Sie mit dem Filter font_modify einfacher auf bestimmte Stile und Schnitte zugreifen.

{% assign bold_italic = settings.body_font | font_modify: 'weight', 'bold' | font_modify: 'style', 'italic' %}

Die folgenden Eigenschaften und Änderungen können verwendet werden:

Property	Modification	Behavior
`style`	`normal`	Returns the normal variant of the same weight (if it exists).
	`italic`	Returns the italic variant of the same weight (if it exists).
	`oblique`	Has the same behavior as `italic`. None of the font families provided by Shopify have both italic and oblique styles.
`weight`	`100` → `900`	Returns a variant of the same style with the given weight (if it exists).
	`normal`	Has the same behavior as `400`.
	`bold`	Has the same behavior as `700`.
	`+100` → `+900`	Returns an incrementally bolder font of the same style (if it exists). For example, if `font` has a weight of `400`, then `font \| font_modify "weight", "+100"` returns the variant with a weight of `500` for the same style.
	`-100` → `-900`	Returns an incrementally lighter font of the same style (if it exists). For example, if `font` has a weight of `400`, then `font \| font_modify "weight", "-100"` returns the variant with a weight of `300` for the same style.
	`lighter`	Returns a lighter variant of the same style by applying the rules used by the CSS `font-weight` property and browser fallback weights (if it exists).
	`bolder`	Returns a bolder variant of the same style by applying the rules used by the CSS `font-weight` property and browser fallback weights (if it exists).

Handling font variants

Wenn der Filter font_modify versucht, eine Schriftvariante zu erstellen, die nicht existiert, gibt er nil zurück. Das folgende Beispiel zeigt die Ausgabe, wenn keine fettere Variante von settings. body_font existiert:

{% assign bolder_font = settings.body_font | font_modify: 'weight', 'bolder' %}
h2 {
  font-weight: {{ bolder_font.weight }};
}

h2 {
  font-weight: ;
}

Um dies zu verhindern, können Sie entweder den Wert von bolder_font mit einem Control flow-Tag überprüfen oder mit dem Filterdefault einen Ausweichwert zuweisen:

{% assign bolder_font = settings.body_font | font_modify: 'weight', 'bolder' %}
{% if bolder_font %}
h2 {
  font-weight: {{ bolder_font.weight }};
}
{% endif %}

font_face

Gibt eine CSS @font-face-Deklaration zum Laden der gewählten Schriftart zurück.

<style>
  {{ settings.heading_font | font_face }}
</style>

<style>
  @font-face {
    font-family: "Neue Haas Unica";
    font-weight: 400;
    font-style: normal;
    src: url("https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.8a2375506d3dfc7b1867f78ca489e62638136be6.woff2?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv") format("woff2"),
         url("https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.06cdfe33b4db0659278e9b5837a3e8bc0a9d4025.woff?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv") format("woff");
  }
</style>

Additional properties

Der Filter font_face nimmt ein optionales Argument font_display an, um die Eigenschaftfont-display der Erklärung @font-face anzupassen.

<style>
  {{ settings.heading_font | font_face: font_display: 'swap' }}
</style>

<style>
  @font-face {
    font-family: "Neue Haas Unica";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.8a2375506d3dfc7b1867f78ca489e62638136be6.woff2?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv") format("woff2"),
         url("https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.06cdfe33b4db0659278e9b5837a3e8bc0a9d4025.woff?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv") format("woff");
  }
</style>

font_url

Gibt eine CDN-URL für die gewählte Schriftart zurück.

{{ settings.heading_font | font_url }}

https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.8a2375506d3dfc7b1867f78ca489e62638136be6.woff2?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv

Standardmäßig gibt font_url die Version woff2 zurück, kann aber auch mit einem zusätzlichen Parameter zur Angabe des Formats aufgerufen werden. Sowohl woff als auch woff2 werden unterstützt.

{{ settings.heading_font | font_url: 'woff' }}