Dengan diperkenalkannya font web pada tahun 2009, desainer web memiliki serangkaian palet tipografi yang kaya. Font ini telah banyak digunakan berkat aturan CSS @fontfaceyang memberi desainer kesempatan untuk membebaskan diri dari font yang aman web (sistem).
Berbagai format file font tersedia (dan) tersedia di pengecoran font besar, khususnya Google font.
Pada saat itu, menggunakan font untuk web berarti bekerja dengan file terpisah untuk setiap berat dan gaya karakter. Misalnya, nama file seperti berikut ini memperjelas bagaimana font akan ditampilkan:
Roboto-Italic.woff2
Lato-BoldItalic.woff2
OpenSans-SemiBold.ttf
WorkSans-ExtraBold.ttfSetiap varian harus dimuat sebagai file sendiri. Ini meningkatkan bobot halaman, membutuhkan lebih banyak permintaan HTTP dan menambahkan kompleksitas dalam pilihan dan penerapan font dalam desain.
Munculnya font variabel
Pada tahun 2016 titik balik penting datang dalam tipografi digital: font variabel. Dikembangkan bekerja sama oleh Google, Apple, Adobe dan Microsoft, mereka dengan cepat memasuki arus utama.
Fitur khas dari font variabel adalah bahwa ia dapat berisi salah satu elemen berikut, yang masing -masing dikenal sebagai sumbu:
| Asse | Properti CSS |
| peso | font-weight |
| stile | font-style: italic |
| kecenderungan | font-style: oblique |
| pemanjangan | font-stretch |
| Sumbu ukuran optik (OPSZ) | font-variations-setting |
Format file yang paling banyak digunakan adalah .woff2 (Format font terbuka web), format yang sangat terkompresi yang telah menjadi rekomendasi W3C pada tahun 2018. Meskipun dilatih sebagai .ttf e .otf Mereka dapat digunakan sebagai font variabel, format yang paling efisien adalah .woff2. Semua browser modern mendukung font variabel.
Untuk kejelasan, kami membuat perbedaan antara “font web” dan “font variabel”. Namun dalam praktiknya, font variabel sering disatukan dengan font web.
Mengapa Menggunakan Font Variabel?
Ada tiga alasan utama untuk menggunakan font variabel dalam proyek web:
- Kinerja Terbaik: Alih -alih mengingat beberapa file dari font terpisah (reguler, tebal, miring, dll.), File font variabel tunggal dapat menutupi semuanya. Ini berarti lebih sedikit permintaan http dan mengurangi waktu pemuatan.
- Fleksibilitas dalam Desain: Font variabel memungkinkan Anda memiliki kontrol granular. Misalnya, alih -alih terikat
font-weight: 500Hai600Kami dapat menetapkan nilai yang dipersonalisasi seperti532. - Tipografi Reaktif: Karena font variabel dapat beradaptasi dengan lancar, dimungkinkan untuk membuat tipografi yang merespons semua perangkat. Contoh yang bagus: penggunaan
font-weight: clamp()Untuk memanjat bobot antara viewport yang berbeda, tanpa “lompatan” yang tiba -tiba yang akan terjadi dengan file font statis.
Sebagai wordpress menggunakan font variabel
Dengan rilis WordPress 6.1 pada bulan November 2022, ditambahkan ke sistem theme.json Dukungan font variabel. Demonstrasi pertama diberikan oleh dua puluh tiga tema dua puluh.
Kustomisasi tema dengan font variabel
Saat bekerja dengan tema anak TT5, Anda mulai dengan perolehan gaya tema induk dan tema anak.
Untuk memastikan bahwa font yang dipersonalisasi muncul secara konsisten baik di editor dan front-end, kami juga memasukkan file fonts.css yang mencakup pernyataan @font-face diperlukan.
<?php
// enqueue parent and child styles
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array('parent-style'),
wp_get_theme()->get('Version')
);
// enqueue custom fonts
wp_enqueue_style(
'child-fonts',
get_stylesheet_directory_uri() . '/fonts.css',
array(),
wp_get_theme()->get('Version')
);
});Seperti biasa, metode pengiriman skrip bergantung pada tema itu sendiri. Tidak ada metode standar.
Untuk memastikan bahwa kami telah mengkonfigurasi tema anak kami dengan benar, kami melakukan tes ini dalam file styles.css:
body { background: #0000ff; }Menambahkan font dengan tema.json
TT5 sudah mencakup dua font variabel yang telah ditentukan: manrope dan kode FIRA. Untuk contoh ini, kami menambahkan Vollkorn dan menjadikannya font header yang telah ditentukan dengan berat 600.
Inilah bagian penting dari theme.json:
{
"$schema": "
"version": 3,
"settings": {
"appearanceTools": true,
"typography": {
"fontFamilies": [
{
"name": "Manrope",
"slug": "manrope",
"fontFamily": "Manrope, sans-serif",
"fontFace": [
{
"fontFamily": "Manrope",
"src": ["file:../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2"],
"fontWeight": "200 800",
"fontStyle": "normal"
}
]
},
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": ""Fira Code", monospace",
"fontFace": [
{
"fontFamily": ""Fira Code"",
"src": ["file:../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"],
"fontWeight": "300 700",
"fontStyle": "normal"
}
]
},
{
"name": "Vollkorn",
"slug": "vollkorn",
"fontFamily": "Vollkorn, serif",
"fontFace": [
{
"fontFamily": "Vollkorn",
"src": ["file:../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-VariableFont_wght.woff2"],
"fontWeight": "400 900",
"fontStyle": "normal"
},
{
"fontFamily": "Vollkorn",
"src": ["file:../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-Italic-VariableFont_wght.woff2"],
"fontWeight": "400 900",
"fontStyle": "italic"
}
]
}
],
"customFontSize": true,
"fluid": true
}
},
"styles": {
"typography": {
"fontFamily": "var:preset|font-family|manrope"
},
"elements": {
"heading": {
"typography": {
"fontFamily": "var:preset|font-family|vollkorn",
"fontWeight": "600"
}
}
}
}
}Hasilnya adalah penampilan font Vollkorn di seluruh situs.
Ada beberapa hal yang perlu diperhatikan:
- Kami mungkin ingin menyalin file kode Manrope dan FIRA pada tema anak jika TT5 diperbarui dengan file baru.
- Tampaknya kode untuk font ini berlebihan, karena mereka sudah direkam oleh tema utama. Namun, penting untuk menyatakan mereka dalam tema anak. Dengan cara ini, ini memastikan bahwa mereka ditampilkan dengan benar di antarmuka pengguna Font Bookshop dan bahwa mereka tetap tersedia bahkan jika tema utama memperbarui dengan jalur atau perubahan baru.
- Kami mengacu pada dua file Vollkorn yang berbeda.
Pastikan font dimuat dengan benar
Terkadang font tidak ditampilkan dengan benar di front-end sampai mereka menyatakannya di CSS. Berikut adalah contoh khas styles.css:
/*
Theme Name: TT5 Child
Template: twentytwentyfive
Version: 1.0
*/
/* Ensure fonts are loaded and applied */
body {
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}
code,
pre {
font-family: 'Fira Code', 'Courier New', monospace;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Vollkorn', 'Times New Roman', serif;
}Di file fonts.cssKami mendeklarasikan file font menggunakan @font-face. Dengan cara ini browser tahu font mana yang akan dimuat dan diterapkan. Jika kita mau sangat berbahaya Font kritis (misalnya, font interstasi utama), kita juga dapat menambahkan a <link rel="preload"> tag al <head> dari situs melalui kait WordPress. Dalam kebanyakan kasus, aturannya @font-face menipu font-display: swap Ini menawarkan keseimbangan yang baik antara kinerja dan pengalaman pengguna.
/* Preload critical fonts for better performance */
@font-face {
font-family: 'Manrope';
src: url('../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2')
format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Code';
src: url('../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2')
format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Vollkorn';
src: url('../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-VariableFont_wght.woff2')
format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Vollkorn';
src: url('../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-Italic-VariableFont_wght.woff2')
format('woff2');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}Hasilnya adalah halaman di mana header berada di Vollkorn secara default dengan berat karakter sama dengan 600.
Jika lebih suka, Anda dapat menyertakan aturan @font-face di dalam styles.css. Dengan cara ini tidak perlu lagi memasukkan file fonts.css.
Memfasilitasi pilihan bobot font oleh pengguna
Salah satu keunggulan terbesar dari font variabel adalah bahwa bobot tidak terbatas pada nilai tetap seperti 400 atau 600. Dimungkinkan untuk menggunakan nilai apa pun di antara 100 E 900. Masalahnya adalah bahwa WordPress tidak menyediakan antarmuka pengguna untuk memilih bobot yang dipersonalisasi ini.
Untuk mengatasi masalah ini, kami telah membuat a Plugin minimal ditelepon Opsi berat font. Plugin ini menambahkan halaman Pengaturan di Saya menunggu > Berat karakter Di mana Anda dapat mendefinisikan bobot yang dipersonalisasi untuk blok teks, header, dan kode.
Berikut adalah gambaran tentang logika dasar:
<?php
/**
* Plugin Name: Font Weight Options
*/
class Font_Weight_Options {
public function __construct() {
add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );
add_action( 'wp_head', array( $this, 'apply_font_weights_frontend' ) );
}
public function add_admin_menu() {
add_theme_page(
__( 'Font Weight Settings', 'font-weight-options' ),
__( 'Font Weight', 'font-weight-options' ),
'manage_options',
'font-weight-settings',
array( $this, 'render_admin_page' )
);
}
public function apply_font_weights_frontend() {
$weights = get_option( 'fwo_font_weights', array(
'body' => 400,
'headings' => 600,
'code' => 400,
) );
echo "<style>
body { font-weight: {$weights['body']} !important; }
h1, h2, h3, h4, h5, h6 { font-weight: {$weights['headings']} !important; }
code, pre { font-weight: {$weights['code']} !important; }
</style>";
}
}
new Font_Weight_Options();Kami telah menerbitkan kode sumber lengkap di Github Gist, termasuk modul pengaturan dan validasi.
Versi lengkapnya menambahkan:
- Nilai yang telah ditentukan sebelumnya untuk mengaktifkan plugin
- Modul Pengaturan Sederhana untuk Administrator dengan Bidang Numerik (100-900)
- Validasi untuk menjaga nilai dalam interval
- Output berat baik di tepi blok dan di frontend
Hasilnya adalah halaman baru ini di admin WP kami yang memungkinkan pengguna untuk mengatur nilai bobot karakter untuk tiga font kami. Kami telah memilih tiga nilai “non -standar”.
Hasilnya adalah halaman dengan bobot karakter yang sesuai ini yang ditampilkan seperti yang diharapkan dalam editor halaman dan di front-end.
Cara yang lebih sederhana dan lebih baik untuk menambahkan satu font variabel tunggal
Jika metode ini mungkin tampak berlebihan, kami memiliki alternatif yang tidak lengkap, tetapi ini adalah solusi cepat untuk memasukkan semua jenis font dalam suatu tema.
Pengguna dapat dengan mudah menambahkan font Google melalui pustaka font. Jika Anda lebih suka jalan ini, Anda dapat melihat artikel kami di 15 font Google terbaik (ditambah tips untuk menggunakannya).
Tetapi jika Anda lebih suka sesuatu yang berbeda dari google font? Ada banyak cara untuk mendapatkan font open source dengan lisensi yang benar untuk proyek mereka. Kami beralih ke GitHub untuk mendapatkan SumberSans3vf-Appright, font oleh Adobe.
Tujuan kami adalah menggunakannya sebagai font opsional yang akan ditampilkan di editor dan frontend.
File font dimasukkan ke dalam folder /assets/fonts tema anak kita. Dari sini kami membuat functions.php.
<?php
/**
* Enqueue parent and child theme styles.
*/
function twentytwentyfive_kinstachild_enqueue_styles() {
// Parent theme style.
wp_enqueue_style(
'twentytwentyfive-style',
get_parent_theme_file_uri( 'style.css' ),
array(),
wp_get_theme()->get( 'Version' )
);
// Child theme style.
wp_enqueue_style(
'twentytwentyfive-child-style',
get_stylesheet_uri(),
array( 'twentytwentyfive-style' ),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'twentytwentyfive_kinstachild_enqueue_styles' );
/**
* Enqueue child theme styles in the editor.
*/
add_action( 'after_setup_theme', function() {
add_editor_style( 'style.css' );
} );Seperti pada contoh sebelumnya, file kami theme.json Dia harus merujuk pada kode Manrope dan Fira dari tema induk. Jika kita menghilangkannya, kita menghilangkannya dari tema.
{
"$schema": "
"version": 3,
"settings": {
"typography": {
"fontFamilies": [
{
"name": "Manrope",
"slug": "manrope",
"fontFamily": "Manrope, sans-serif",
"fontFace": [
{
"src": [
"file:../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2"
],
"fontWeight": "100 900",
"fontStyle": "normal",
"fontFamily": "Manrope"
}
]
},
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": ""Fira Code", monospace",
"fontFace": [
{
"src": [
"file:../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
],
"fontWeight": "100 900",
"fontStyle": "normal",
"fontFamily": ""Fira Code""
}
]
},
{
"name": "Source Sans 3",
"slug": "source-sans-3",
"fontFamily": ""Source Sans 3", sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/SourceSans3VF-Upright.woff2"
],
"fontWeight": "100 900",
"fontStyle": "normal",
"fontFamily": "Source Sans 3"
}
]
}
]
}
}
}Ingatlah bahwa file diperlukan styles.css Pada dasarnya untuk memasukkan metadata penting yang menunjukkan kepada WordPress kehadiran tema anak.
Ringkasan
Apakah Anda memilih konfigurasi yang sepenuhnya personal atau integrasi cepat, font variabel di WordPress menawarkan solusi yang sangat baik untuk meningkatkan tipografi situs. Mereka meningkatkan kinerja, mengurangi kompleksitas dan menawarkan opsi desain yang reaktif dan fleksibel yang tidak dimungkinkan dengan font statis tradisional.
Untuk sepenuhnya mengeksploitasi potensi mereka, mungkin perlu membuat antarmuka pengguna yang dipersonalisasi yang memaparkan sumbu variabel (seperti berat, kecenderungan atau dimensi optik) dan memberi pemilik situs kontrol yang lebih besar.
Jika Anda sedang membangun situs WordPress di platform hosting KINSTA, Anda akan memiliki infrastruktur berorientasi kinerja, yang membuatnya lebih mudah untuk melayani sumber daya modern secara efisien seperti font variabel.
Bud Kraus telah bekerja dengan WordPress sebagai instruktur di kelas dan online, pengembang situs, dan pencipta konten sejak 2009. Dia telah menghasilkan video instruksional dan menulis banyak artikel untuk bisnis WordPress.
News
Berita
News Flash
Blog
Technology
Sports
Sport
Football
Tips
Finance
Berita Terkini
Berita Terbaru
Berita Kekinian
News
Berita Terkini
Olahraga
Pasang Internet Myrepublic
Jasa Import China
Jasa Import Door to Door
Situs berita olahraga khusus sepak bola adalah platform digital yang fokus menyajikan informasi, berita, dan analisis terkait dunia sepak bola. Sering menyajikan liputan mendalam tentang liga-liga utama dunia seperti Liga Inggris, La Liga, Serie A, Bundesliga, dan kompetisi internasional seperti Liga Champions serta Piala Dunia. Anda juga bisa menemukan opini ahli, highlight video, hingga berita terkini mengenai perkembangan dalam sepak bola.
