Cara Menggunakan Fon Web di WordPress

Baru -baru ini, semua orang nampaknya bercakap tentang udang karang. Bukan krustasea dari lautan, tetapi fon web. Bagi mereka yang tidak pernah mendengarnya, Lobster adalah contoh yang baik dari font Google yang popular yang tertanam ke dalam laman web.

Fon Embedding tidak begitu baru seperti yang anda fikirkan. Kembali pada tahun 1998, CSS 2 memperkenalkan peraturan @font-face. Ini, dalam teori, pereka yang membolehkan untuk memuat turun font TrueType atau PostScript ke komputer pengguna untuk dipaparkan di laman web. Malangnya, pada masa itu, hanya Internet Explorer 4 menyokong peraturan. Terdapat ketakutan yang meluas bahawa fon yang mahal untuk lesen akan dibajak. Hari ini, CSS 3 masih tidak membantu dengan isu cetak rompak, tetapi semua pelayar web menyokong peraturan. Resolusi skrin telah meningkat secara dramatik sejak masa itu juga. Jadi, jika anda belum memeluk fon embedding lagi, sekarang adalah masa untuk berbuat demikian.

Takeaways Key

merangkul penggunaan fon web di WordPress untuk meningkatkan daya tarikan visual dan memastikan tipografi yang konsisten merentasi peranti dan penyemak imbas yang berbeza.
Gunakan font Google, fon web Adobe Edge, dan perpustakaan font terbuka untuk mengakses pelbagai fon percuma dan sumber terbuka.
Pertimbangkan fon berbayar dari sumber seperti Font Shop untuk tipografi berkualiti tinggi dan unik yang boleh membezakan laman web anda.
Melaksanakan fon dalam WordPress menggunakan kaedah CSS seperti @import, Link, atau JavaScript, atau menggunakan plugin untuk integrasi yang lebih mudah. ​​
Gunakan susunan fon dalam CSS untuk menentukan fon pilihan dan menyediakan pilihan sandaran, memastikan teks dipaparkan dengan berkesan di seluruh sistem yang berbeza.
Sentiasa sandarkan laman WordPress anda sebelum membuat perubahan pada tema atau menambah fon baru untuk mengelakkan kehilangan data dan memastikan kemas kini yang lancar.

pilihan font web semasa

Sebelum kita bercakap tentang menggunakan fon web di WordPress, mari kita mengambil langkah mundur dan melihat fon di web secara umum.

Tahap sokongan yang paling asas untuk fon berasal dari sistem operasi yang digunakan pengguna. Ini mungkin menawarkan berpuluh -puluh fon untuk sistem desktop atau komputer riba hanya untuk tiga fon pada Android.

Malangnya, ini tetap menjadi sistem nasib yang cukup. Kami sedar betapa buruknya Helvetica melihat mesin berasaskan Windows apabila ditetapkan pada 16px dan di bawah, dan Arial dapat kelihatan kurang daripada beberapa versi lama OS X.

Banyak percanggahan ini telah berlaku kerana sistem operasi Apple Mac yang asal terikat dengan teknologi percetakan lama 72 mata per inci . Oleh itu, fon 10 mata telah diperuntukkan 10 piksel pada paparan. Pada masa itu, Apple menawarkan monitor menegak (potret) yang sama dengan kertas Amerika yang standard, dan perbandingan satu sama lain boleh dibuat dari skrin ke versi bercetak. Microsoft sebaliknya, memilih 96 ppi secara asas orang akan duduk tambahan 1/3 dari jarak jauh dari monitor komputer daripada yang mereka lakukan dari halaman bercetak. Oleh itu semuanya diberikan 1/3 lebih besar pada komputer berasaskan Windows.

Perkara telah datang jauh sejak tahun 1990 -an apabila teknologi ini muncul, dan kini kami mempunyai pelbagai saiz dan resolusi skrin yang berbeza untuk ditangani. Namun, melainkan jika anda menentukan fon, peranti dan penyemak imbas pengguna masih akan membuat pilihan fon untuk anda.

Satu lagi isu ialah sesetengah organisasi mengehadkan fon pada komputer pengguna. Saya pernah bekerja di sebuah organisasi yang komputernya hanya dipasang Georgia dan Verdana. Ini supaya surat dan e -mel yang dihantar oleh pekerja hanya boleh dihantar menggunakan fon yang sepadan dengan identiti korporat.

memanfaatkan fon terbina dalam

Tidak menahan penggunaan fon korporat, kebanyakan komputer desktop dan komputer riba - mempunyai fon yang dibuat untuk fon Microsoft Core untuk projek web. Pek fon ini dari tahun 1996 termasuk Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana dan Webdings. Walaupun, versi fon ini atau kesetaraan mereka boleh diandalkan sebagai di kebanyakan desktop dan komputer riba, penyemak imbas mungkin tidak boleh dipercayai untuk memaparkan fon seperti yang anda harapkan.

batasan sedemikian boleh diminimumkan dengan menggunakan timbunan font

. Ini menetapkan peraturan CSS untuk penyemak imbas untuk menggunakan salah satu daripada beberapa fon. Ia selalu termasuk menangkap semua serif (mempunyai perhiasan kecil pada akhir strok) atau sans-serif (tanpa perhiasan). Oleh itu, kita mungkin mempunyai keluarga font: Cambria, 'Hoefler Text', 'Pembebasan Serif', Times, 'Times New Roman', Serif. Penyemak imbas harus melihat melalui 'stack' dan teks paparan anda menggunakan fon pertama yang ditakrifkan dalam senarai anda yang terdapat pada komputer pengguna. Sekiranya ia tidak dapat mencari mana -mana, ia menggunakan fon sandaran yang ditakrifkan, dalam contoh ini, sebagai serif.

Matlamatnya adalah untuk memilih pelbagai fon yang menjadikan pelbagai pelayar pada pelbagai resolusi dan tahap zum yang berbeza.

Terdapat perbincangan yang sangat baik mengenai susunan font oleh pereka Kanada Amrinder Sandhu di sini.

Malangnya, menggunakan timbunan font tidak membantu jika penonton anda menggunakan peranti pegang tangan. Peranti Android menggunakan sans droid, droid serif, dan droid sans mono, manakala peranti iOS Apple menggunakan Helvetica Neue yang mempunyai pelbagai gaya dan berat.

Anda mungkin ingin mempunyai lebih banyak kawalan ke atas bagaimana halaman WordPress anda kelihatan daripada bergantung pada fon terbina dalam pelbagai sistem operasi dan versi. Kita dapat mengatasinya dengan memasukkan fon.

Sekarang, mari kita lihat jenis fon web yang ada.

fon percuma

Kebanyakan fon yang ada dilesenkan dalam beberapa cara. Apabila anda membeli komputer, tablet, atau telefon bimbit yang mempunyai sistem operasi yang dipasang, sebahagian daripada kos adalah pelesenan fon. Walau bagaimanapun, terdapat beberapa cara untuk menggunakan pelbagai fon tertanam percuma.

Fon tertanam adalah set aksara yang dimuat turun ke komputer pengguna dari platform pihak ketiga untuk masa halaman itu aktif, dan hilang apabila halaman ditutup. Itu membolehkan syarikat berkhidmat untuk mengekalkan kawalan fon, tetapi membolehkan anda memaparkan fon dengan keperluan untuk membayar untuk menggunakannya. Terdapat sejumlah besar syarikat yang melayani fon. Yang paling terkenal ialah:

1. Font Google, mungkin perkhidmatan font percuma yang paling popular, platform menawarkan lebih daripada 700 fon yang direka dengan baik, termasuk udang galah.
2. Adobe juga menawarkan fon melalui platform Font Web Edge mereka. Antara muka ini secara langsung dengan perkhidmatan TypeKit (lihat di bawah), tetapi menapis fon berbayar yang meninggalkan fon terbuka percuma.
3. satu lagi platform yang patut dipertimbangkan ialah Perpustakaan Font Terbuka. Ini mempunyai lebih daripada 600 fon.

Semua fon pada platform ini, dan beberapa orang lain, gunakan lesen font terbuka. Matlamat Lesen Font Terbuka (OFL) adalah untuk merangsang pembangunan projek fon kerjasama di seluruh dunia, untuk menyokong usaha penciptaan fon masyarakat akademik dan linguistik, dan menyediakan rangka kerja percuma dan terbuka di mana fon boleh dikongsi dan diperbaiki dalam perkongsian dengan orang lain.

Kelebihan fon terbuka adalah bahawa mereka boleh digunakan secara bebas untuk digunakan di laman web anda tanpa perlu membayar yuran lesen tahunan. Kelemahannya ialah fon pilihan anda mungkin tidak mempunyai pelbagai gaya dan berat.

Fon berbayar

Walaupun kelaziman fon percuma, masih terdapat sebilangan besar fon fon yang menawarkan fon premium. Sebagai contoh, Arkib Type Foundries menyenaraikan hampir 300 pencipta dan laman web yang menawarkan typefaces premium, walaupun tidak semuanya ditawarkan untuk membenamkan ke dalam laman web.

organisasi yang menawarkan fon premium untuk kegunaan web, kedai font berasaskan Jerman mungkin merupakan pasaran yang paling popular untuk fon berbayar. Terdapat fon yang berkualiti tinggi, serta set glyphs yang luar biasa seperti set buah -buahan dan sayur -sayuran dapur Ulrike Rausch, garpu dan pisau, periuk dan peralatan rumah, Liebecook.

Jika anda mempunyai akaun awan kreatif Adobe, anda secara automatik mendapat akses ke perkhidmatan TypeKit Adobe. TypeKit menawarkan lebih daripada 450 fon. Penangkapan itu adalah sementara lesen membolehkan anda menggunakan fon dalam penerbitan cetak dan di laman web bukan komersil peribadi anda, jika anda bekerja untuk klien, anda hanya boleh menggunakan fon web jika anda mempunyai akaun perniagaan Adobe. Adobe mencadangkan bahawa anda menyediakan akaun untuk pelanggan semasa pembangunan dan menyerahkannya kepada mereka. Ini mempunyai kelemahan bahawa jika pelanggan gagal membayar akaun mereka, laman web itu akan kembali ke fon sandaran dalam timbunan font yang ditetapkan, iaitu fon sistem.

Mendapatkan fon yang anda mahukan di halaman WordPress anda dan jawatan

Terdapat beberapa plugin yang membolehkan anda menggunakan fon web di laman web WordPress anda, dengan font Google yang mudah menjadi salah satu yang paling popular. Saya tidak akan fokus pada plugin dalam artikel ini, tetapi melihat bagaimana untuk melakukan ini secara manual, dengan membuat perubahan pada tema kami. Di samping itu, beberapa tema di pasaran datang dengan pelbagai pilihan font web.

Kod sebenar akan berbeza dari perkhidmatan ke perkhidmatan. Saya akan menggariskan kaedah untuk font Google, dan Adobe Edge/TypeKit. Perkhidmatan lain berfungsi dengan cara yang sama. Pertama sekali, ingatlah untuk membuat sandaran laman web anda (atau idealnya berfungsi pada salinan pembangunan yang berasingan), dan kerja salinan fail hanya sekiranya ada sesuatu yang salah. Perubahan gaya harus dibuat menggunakan tema kanak -kanak supaya perubahan anda tidak ditimpa setiap kali tema dikemas kini.

Google Fonts

Terdapat tiga kaedah (selain dari plugin) untuk memaparkan fon luaran pada halaman WordPress anda dan jawatan dengan font Google: @import, link, dan javascript.

Sebaik sahaja anda telah memilih font anda, klik butang Gunakan Pantas. Jika ditawarkan periksa berat dan gaya yang diperlukan, dan set aksara.

Seterusnya, anda perlu memilih kaedah penyembuhan. Kaedah yang paling mudah adalah untuk menambah peraturan @import ke gaya.css tema yang anda ingin ubah suai. Nampaknya tidak penting di mana anda meletakkan kod dalam peraturan gaya.css. Walau bagaimanapun, @import akan menyekat sebarang kandungan lain daripada memuat turun sehingga ia telah menyelesaikan tugasnya. Oleh itu, jika anda merancang untuk menggunakan kaedah ini untuk pelbagai fon, anda harus menggabungkan permintaan ke dalam satu peraturan @import.

Kaedah kedua adalah sama mudah, ia menggunakan kaedah pautan dan kod terkandung pada tab standard. Kali ini kod dimasukkan ke dalam fail header.php. Letakkan kod di bahagian atas fail. Anda kemudian boleh menambah nama font ke timbunan fon anda. Ingatlah untuk menambahkannya sebagai fon pertama, diikuti oleh fon sistem pilihan, dan gaya fon sandaran.

Di sini perlu diperhatikan bahawa blog Font Web Google menyatakan bahawa jika tag skrip hadir sebelum pengisytiharan @font-face, maka Internet Explorer tidak akan memaparkan sebarang kandungan halaman sehingga fail font telah selesai memuat turun. Oleh itu, jika fail gagal memuat turun, pengguna Internet Explorer mungkin ditinggalkan dengan halaman kosong atau sebahagiannya dimuatkan. Jadi letakkan pengisytiharan @font-face seawal mungkin dalam fail.

Kaedah selanjutnya adalah untuk enqeue font dalam fail functions.php. Fungsi yang ditunjukkan di bawah akan memuatkan gaya dan berat fon yang diperlukan.

Akhirnya, anda boleh memuatkan font menggunakan JavaScript. Terdapat hujah -hujah untuk dan terhadap penggunaan JavaScript, tetapi bilangan pengguna dengan JavaScript dimatikan adalah sangat kecil. Kod ini ditambah dalam header.php tema kanak -kanak, di mana ia diletakkan di antara tag

dan . Sekali lagi Google mencadangkan bahawa ia harus menjadi elemen pertama, dengan cara ini fon akan dimuatkan sementara bahagian lain dari beban halaman dan ini harus mengelakkan 'flash of unstyled text'.

Adobe Edge Web Fonts dan TypeKit

Menambah fon Adobe TypeKit ke WordPress adalah sedikit kurang mudah. Walaupun anda boleh menggunakan kaedah yang sama kepada mereka untuk fon Google, pemaju kurang berpengalaman boleh menggunakan fon TypeKit untuk plugin WordPress. Sebaik sahaja dipasang plugin akan muncul dalam menu Tetapan anda. Sekali lagi, ingatlah untuk sandaran WordPress sebelum membuat pengubahsuaian ini.

Untuk menggunakan TypeKit, log masuk ke akaun anda melalui aplikasi Awan Kreatif. Sebaik sahaja anda telah memilih fon, buat kit. Beri nama kit anda, kemudian tambahkan nama domain laman web yang anda gunakan pada fon. Sebaik sahaja anda memasuki butiran tapak anda, anda akan diberi sekeping JavaScript. Salin dan simpan ini dalam fail teks menggunakan editor teks biasa seperti TextEdit atau Notepad.

Langkah seterusnya ialah memilih font anda, tambahkannya ke kit tapak anda, dan siarkannya. Tambahkan sebarang fon lanjut yang ingin anda gunakan dan menerbitkannya.

Selepas kit diterbitkan, pergi ke fon TypeKit untuk plugin WordPress.

tambahkan sekeping kod yang anda simpan dalam fail teks.

Tambah pemilih kod CSS seperti yang diperlukan. Dalam contoh, saya telah menambah tajuk-tajuk untuk menunjukkan sebagai teks H1 (halaman WordPress dan tajuk pos adalah teks H1.). Saya juga telah menambah sub-tajuk yang subheading H2 dalam teks badan utama. Perhatikan bahawa sebelum menamakan pemilih anda, adalah idea yang baik untuk memeriksa bahawa nama -nama belum digunakan oleh tema anda. Anda boleh melakukan ini dengan memeriksa unsur -unsur menggunakan alat pemaju dalam penyemak imbas anda. Jangan lupa untuk menyegarkan skrin anda mengikut setiap perubahan yang anda buat, ia boleh mengambil masa beberapa minit untuk fon untuk tersedia di laman web anda.

Akhirnya, ia juga disyorkan bahawa anda sentiasa menentukan kedua-dua sifat fon-berat dan gaya font setiap kali anda menggunakan font. Sekali lagi, ini membantu anda mengekalkan kawalan paparan fon ke atas pelbagai platform yang mungkin.

Kesimpulan

Menambah fon ke laman web anda adalah kaedah yang diterima untuk menghasilkan tapak menarik. Ia juga boleh menjadi cara yang baik untuk membuat tema WordPress yang biasa digunakan dari semua yang lain.

Walau bagaimanapun, jangan tergoda untuk menambah sejumlah besar fon hanya kerana anda boleh - salah satu tugas pertama saya dalam komunikasi visual di sekolah menengah adalah untuk mengira bilangan fon pada paket bijirin (terdapat lebih daripada 25 fon paket serpihan jagung!). Kurang sering lebih banyak dengan fon, dan mengehadkan diri anda kepada dua atau tiga reka bentuk biasanya merupakan amalan terbaik, dari bukan sahaja perspektif kelajuan pemuatan, tetapi juga sudut pandangan reka bentuk visual.

Google menawarkan ciri pasangan font di pop keluar, butang di sebelah butang penggunaan cepat untuk membantu anda memulakan. Reka Bentuk Grafik adalah kraf yang mengambil masa bertahun -tahun untuk menguasai, tetapi membenamkan beberapa fon yang baik akan memastikan bahawa reka bentuk yang anda pilih akan dilihat oleh semua pengguna anda.

soalan yang sering ditanya mengenai menggunakan fon web di WordPress

Bagaimana saya boleh menambah font Google ke laman WordPress saya?

Menambah Font Google ke laman WordPress anda adalah proses yang mudah. Pertama, anda perlu melawat laman web Google Fonts dan pilih fon yang anda mahu gunakan. Klik pada butang 'Pilih Font Ini' dan salin pautan yang disediakan. Kemudian, pergi ke papan pemuka WordPress anda, navigasi ke Rupa> Editor Tema dan cari fail header.php. Tampalkan pautan yang disalin dalam tag kepala. Akhirnya, anda boleh menggunakan font dalam CSS anda dengan merujuk keluarga font. Anda boleh melakukan ini dengan memuat naik fail fon (biasanya .ttf atau .otf) ke direktori tema WordPress anda dan kemudian menggunakan CSS untuk memohon font ke laman web anda. Ingatlah untuk memeriksa lesen font sebelum menggunakannya.

Bagaimana saya boleh menukar saiz fon di WordPress?

Anda boleh menukar saiz fon dalam WordPress dengan menggunakan CSS. Pergi ke Rupa> Sesuaikan> CSS tambahan di papan pemuka WordPress anda dan tambahkan peraturan CSS untuk menukar saiz fon. Sebagai contoh, untuk menukar saiz fon semua perenggan hingga 16px, anda boleh menggunakan CSS berikut: P {Font-Size: 16px; }.

Apakah fon selamat web? . Contoh-contoh fon selamat web termasuk Arial, Times New Roman, dan Courier Baru. , anda hanya boleh merujuk fon dalam CSS anda. Sebagai contoh, untuk menggunakan font Arial untuk semua perenggan, anda boleh menggunakan CSS berikut: P {Font-Family: Arial; }.

Apakah perbezaan antara fon serif dan sans-serif? Contohnya termasuk Times New Roman dan Georgia. Fon sans-serif, sebaliknya, tidak mempunyai garis kecil ini. Contohnya termasuk Arial dan Helvetica. Sebagai contoh, untuk menggunakan font Georgia untuk semua tajuk, anda boleh menggunakan CSS berikut: H1, H2, H3, H4, H5, H6 {Font-Family: Georgia; }.

Bolehkah saya menggunakan fon yang berbeza untuk bahagian yang berlainan dari laman WordPress saya? Anda boleh melakukan ini dengan menggunakan CSS untuk memohon fon yang berbeza untuk elemen HTML yang berbeza. Sebagai contoh, anda boleh menggunakan satu font untuk tajuk dan font lain untuk teks badan.

Bagaimana saya boleh melihat font di WordPress sebelum memohon ke laman web saya? WordPress dengan menggunakan plugin seperti Font Google Mudah. Plugin ini membolehkan anda untuk melihat fon pratonton di customizer WordPress sebelum memohonnya ke laman web anda.

Bolehkah saya menggunakan fon yang tidak tersedia di font Google atau dalam fon selamat web standard?

Ya, anda boleh menggunakan fon yang tidak tersedia di font Google atau dalam fon selamat web standard. Anda boleh melakukan ini dengan memuat naik fail fon ke direktori tema WordPress anda dan kemudian menggunakan CSS untuk memohon font ke laman web anda. Ingatlah untuk memeriksa lesen font sebelum menggunakannya.

Atas ialah kandungan terperinci Cara Menggunakan Fon Web di WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!