Pembuatan (dan faedah berpotensi) fon CSS

Bukan yang biasa, sekurang -kurangnya. Setiap watak adalah elemen HTML, dibina dengan CSS. Font web yang benar!

Biarkan saya terperinci. Ini adalah cara untuk membuat teks tanpa menggunakan sebarang font sama sekali. Teks rawak dibahagikan dengan PHP ke dalam kata -kata dan huruf, kemudian diberikan sebagai elemen HTML dengan kelas. Setiap elemen digayakan dengan CSS untuk mencipta watak -watak. Ini adalah "hanya" HTML yang dikawal dengan CSS, tetapi masih, ia adalah perisian dan ia mendapat mesej melalui. Ia mempunyai semua sifat font konvensional, jadi kami akan menyebutnya fon. Fon tanpa format.

Penafian: Saya bukan pakar dalam HTML, CSS, atau PHP. Saya bersedia bertaruh ada jalan pintas atau penyelesaian yang lebih mudah untuk mencapai apa yang saya lakukan di sini, tetapi kerana saya gembira dengan hasilnya, saya akan membentangkan proses dan pengalaman saya. Pembentangan bukan tutorial; Ini adalah percubaan berdasarkan kemahiran terhad saya dan harus diperlakukan seperti itu.

Idea itu

Projek itu tidak pernah dimaksudkan untuk bertahan selama lima bulan, tetapi itulah yang diperlukan! Semuanya bermula dengan bermain dengan ikon CSS, menggunakan unsur-unsur pseudo untuk membuat bentuk. Setelah surat pertama selesai, selebihnya agak mudah. Saya memeriksa untuk melihat sama ada terdapat projek lain yang serupa tetapi tidak banyak, jadi saya bermotivasi untuk melihat sejauh mana saya dapat.

Pada mulanya, fon SVG yang dikawal dengan CSS kelihatan seperti idea yang baik. Ia akan menjadikan tugas ini lebih mudah (SVG dibuat untuk lukisan) dan boleh memberi tumpuan kepada kesan khusus reka bentuk, tetapi ia tidak mempunyai fleksibiliti elemen HTML mentah. SVG tidak boleh diubahsuai bergantung kepada konteks, dan prosesnya kembali kepada reka bentuk fon konvensional, di mana setiap watak mempunyai bentuk dan kod tetap.

Bagaimana ia berfungsi

Ini adalah hibrid web dan reka bentuk fon. Setiap watak dibina seperti mana -mana elemen web dan digunakan sejajar untuk berkelakuan seperti font. Metrik, berat, ciri OpenType dan semua sifat fon lain dikawal secara eksklusif dengan fail CSS.

Reka bentuk fon didasarkan pada lebar sempadan unsur -unsur, yang menjadikannya sangat serba boleh. Dengan pengecualian fon skrip, beberapa gaya dan berat boleh menyebabkan hanya dari variasi sempadan, menggunakan bentuk yang sama. Pada watak-watak yang lebih kompleks, laluan klip dan latar belakang digunakan untuk membuat kesan pemotongan.

Unsur-unsur bersarang dihasilkan apabila :: sebelum dan :: Selepas pseudo-elemen tidak mencukupi untuk membentuk watak. Menggunakan nilai EM untuk lebar, ketinggian dan lebar sempadan akan membantu kemudian mengawal saiz fon. Ini adalah salah satu peraturan keemasan.

Watak (kiri) dibina seperti mana -mana ikon CSS (kanan). Tiada perbezaan utama. Kadang -kadang surat lebih mudah dibina, seperti tongkat, berdasarkan bulatan dan garis. Tetapi di sini adalah apabila anda benar-benar dapat menghargai peranan harta radius sempadan. Secara peribadi, saya tidak pernah menjadi peminat sempadan bulat, tetapi pengalaman ini mengubah fikiran saya. Pada asasnya, tidak ada batasan untuk apa jejari boleh lakukan.

Berikut adalah satu -satunya contoh "sebenar" font CSS dalam artikel ini, seluruh angka contoh ditukar kepada SVG untuk memaparkan lebih mudah dalam catatan blog.

Pratonton Serif membentangkan keadaan yang lebih kompleks, tetapi seperti biasa, fon sans akan mempunyai unsur yang lebih sedikit untuk ditangani, menjadikan fail lebih kecil dan dimuat lebih cepat. Ini bukan masalah dan hanya logik-CSS dibaca sebelum fon tertanam dengan peraturan @font-face.

Cabaran

Bahagian yang paling sukar adalah untuk mengalahkan nisbah piksel, atau menyelaraskan unsur -unsur pseudo ke bentuk asas. Formula matematik terperinci gagal apabila Charater diubahsuai. Pelayar akan merawat setiap elemen secara berasingan dan mengalihkannya ke nilai integer terdekat.

Penyelesaian untuk ini adalah untuk mewujudkan sebanyak mungkin unsur-unsur pseudo (walaupun termasuk elemen tambahan), dan menggunakan rujukan tunggal untuk sepasang :: sebelum dan :: Selepas, tidak berkaitan dengan bentuk utama. Dalam kes ini, penyemak imbas akan menjadikan unsur -unsur lebih kurang ke kedudukan yang sama.

Watak tanpa titik rujukan digambarkan dengan surat S di bawah. Bahagian atas dan bawah surat itu adalah dua elemen pseudo, tanpa bentuk asas untuk bergantung pada (misalnya kawasan kelabu di serif di atas atau di sini dalam dua digit).

Selepas mencipta beberapa ratus aksara, anda menyedari bahawa watak tidak dapat menyokong transformasi sebaris (iaitu skew (), berputar (), dan sebagainya) kerana ia tidak akan menyelaraskan kepada adik -beradik. Ini menjadi lebih jelas secara visual pada pemilihan teks. Kerana itu, elemen pseudo masuk akal. Saya akan mengatakan penting: Peraturan Emas Kedua.

CSS Custom Properties

Nampaknya lebih mudah untuk mencipta gaya dalam CSS daripada perisian font. Anda mempunyai pilihan untuk mengawal bentuk dan saiz untuk pelbagai aksara sekaligus. Dalam CSS, lebih banyak watak dikumpulkan bersama dalam peraturan yang sama.

Sifat -sifat tersuai CSS sangat berguna dalam keadaan ini, terutamanya untuk mengawal sempadan, lebar, dan kedudukan. Berat yang berbeza adalah hasil perubahan dalam pembolehubah, dengan pelarasan selepas itu. Penalaan halus tidak dapat dielakkan kerana bentuk dan saiz watak mengambil lebar sempadan dan mungkin tidak dipaparkan secara proporsional dengan sempadan yang berbeza, terutama pada bentuk asimetri.

Kesan cutout dicipta dengan menambahkan warna latar belakang yang sama ke elemen overlaying, kemudian menggunakan gabungan warna dan kesan menggunakan mod campuran campuran.

Pemboleh ubah warna global diperlukan dalam CSS untuk menghasilkan kesan pemotongan untuk unsur -unsur bersarang yang sebaliknya akan mengikuti warna induk (elemen overlaying sepadan dengan latar belakang).

Harta imej latar belakang tidak akan berfungsi pada watak-watak yang dibina secara eksklusif dengan sempadan dan latar belakang diubah jika elemen mempunyai saiz atau transformasi kedudukan (skala, berputar, atau lain-lain).

Di mana latar belakang tidak boleh digunakan, penyelesaiannya adalah mod campuran-mod: meringankan; pada latar belakang gelap dan campuran-mod: gelap; pada latar belakang cahaya.

Kesan sampingan

Kelemahannya adalah bahawa beberapa kesan boleh mempunyai hasil yang tidak dijangka atau bahkan bertentangan dengan unsur -unsur dengan sifat berubah -ubah. Biasanya, penapis akan membaca elemen sebagai objek penuh. Untuk mengelakkan sebarang konflik, sempadan dan kesan transformasi dikhaskan untuk reka bentuk fon.

Font ke teks

Font tidak akan membuat teks. Idea di tempat pertama adalah untuk membuat teks yang akan dimuat bersama dengan CSS, tanpa sebarang kebergantungan. Untuk itu pilihan terbaik ialah PHP (pendapat rookie saya). Selain memberikan HTML dengan fungsi inline, ia terpulang kepada hampir mana -mana tugas yang boleh dibayangkan. Tanpa PHP projek ini tidak mungkin.

Sememangnya, tugas pertama dengan PHP adalah untuk memecah teks rawak, mengeluarkan ruang tambahan dan membuat kumpulan yang sepadan untuk setiap perkataan dan surat, masing -masing dengan kelasnya sendiri. Setakat ini, begitu baik. Saya tidak akan mendesak bahagian yang berjalan lancar, ia adalah fungsi asas, menggunakan perpecahan, meletup dan semua perkataan lain yang dipinjam dari permainan video.

Namun, sejak saya tidak pernah mengerjakannya sebelum ini, saya terpaksa belajar dengan cara yang sukar. Tiada siapa yang memberitahu saya bahawa PHP menganggap "0" (sifar) sebagai batal, jadi ada hari yang berlalu. Saya tidak dapat mengetahui mengapa sifar saya tidak dipaparkan.

Bagi sesiapa yang mempunyai masalah ini mungkin ia membantu. Daripada menggunakan fungsi kosong (), saya menggunakan yang di bawah:

 fungsi is_blank ($ nilai) {  
  kembali kosong ($ nilai) &&! is_numeric ($ nilai);
}

Isu utama yang lain adalah pelbagai watak. Nampaknya terdapat terlalu banyak tetapan dalam HTML, fail .htaccess, dan pada pelayan itu sendiri hanya untuk mengenali aksara khas. Penyelesaiannya ditemui selepas beberapa hari dalam dokumentasi Thephp, yang disiarkan oleh Qeremy [Atta] gmail [dotta] com, jelas seseorang yang tinggal di kawasan diakritik-berat.

 fungsi str_split_unicode ($ str, $ panjang = 1) {
  $ tmp = preg_split ('~~ u', $ str, -1, preg_split_no_empty);
  jika ($ panjang> 1) {
    $ chunks = array_chunk ($ tmp, $ panjang);
    foreach ($ potongan sebagai $ i => $ chunk) {
        $ chunks [$ i] = join ('', (array) $ chunk);
    }
    $ tmp = $ ketulan;
  }
  kembali $ tmp;
}

Banyak ketulan, jika anda bertanya kepada saya, tetapi ia berfungsi seperti pesona dan menyelesaikan setiap masalah. Fungsi ini pada dasarnya menghadap tetapan bahasa dan akan membaca apa-apa watak, bahkan yang tidak standard. Watak -watak yang dikebumikan dalam jadual Unicode akan diiktiraf jika fungsi PHP termasuk watak itu.

Fungsi ini hanya akan mewujudkan kemungkinan untuk menjana setiap watak seperti yang ditaip, tanpa memerlukan entiti HTML. Pilihan ini tidak akan mengehadkan penggunaan teks dalam format HTML, tetapi kod sebaris mesti dielakkan atau digantikan dengan alternatif. Sebagai contoh, bukannya menggunakan ruang yang tidak pecah (& nbsp;), unsur-unsur boleh dibungkus dalam tag .

Struktur

Dengan ini diselesaikan, langkah seterusnya adalah untuk mewujudkan struktur tertentu untuk setiap watak. Kelas elemen HTML dan kedudukan elemen bersarang bergantung kepada senarai panjang aksara yang sesuai dengan satu atau lebih kelas. Beberapa watak yang paling asas tidak dikecualikan dari senarai ini (contohnya surat "A" kecil memerlukan finial dan itu bermakna elemen/kelas tambahan).

Struktur asas kelihatan seperti ini, hanya untuk mendapatkan idea ...

 'Ć' => 'Cacute C acute'

... yang akan menyebabkan tiga elemen: ibu bapa cacut, huruf C, dan aksen akut. Hasilnya adalah di bawah, di mana dataran merah mewakili elemen induk, yang mengandungi dua elemen pratetap yang lain.

Teknik ini sangat mirip dengan cara diakritik (kadang -kadang ligatur) dibina dalam perisian font, berdasarkan pasangan. Apabila elemen komponen diubah, setiap yang lain akan menyesuaikan diri.

Kerana mana -mana elemen boleh mempunyai pelbagai aplikasi, ID dielakkan dan hanya kelas yang digunakan.

Ciri -ciri OpenType

Fungsi PHP ditetapkan untuk berkelakuan berbeza bergantung pada konteks. Pengiktirafan watak ditetapkan untuk menggantikan pasangan dan membuat ligatur apabila memberikan teks CSS.

Ligatur kontekstual dalam teks CSS bukan watak yang berdiri sendiri dan tidak mempunyai kelas tertentu. Berbeza dengan ciri OpenType konvensional, watak -watak dipulihkan, tidak diganti. Interaksi dikawal dalam CSS dengan menggayakan elemen kedua, untuk menggabungkan atau membentuk watak baru.

Ciri -ciri diaktifkan dengan kelas tertentu yang ditambahkan ke bekas induk. Alternatif diberikan dalam apa jua keadaan, tanpa mengira jika watak didaftarkan atau tidak, dalam setiap pelayar, dengan atau tanpa sokongan ciri fon.

Sintaks HTML

Mana -mana elemen HTML boleh termasuk font CSS, selagi ia mempunyai kelas .css di sebelah berat font. Untuk memilih berat badan, kelas .hin, .light, .regular atau .bold kelas digunakan, sesuatu seperti (tag

 hanyalah langkah keselamatan untuk mengelakkan sebarang gangguan gaya).

Teks boleh mempunyai format HTML. Teks biasa tidak wajib.

PHP akan mengabaikan kurungan (

Juga, bergantung kepada keutamaan susun atur, tag khusus - seperti , , , dan - boleh dianggap sebagai objek untuk mencontohi dan menyesuaikan penampilan dan tingkah laku asli mereka.

Persediaan

Teks CSS adalah sekumpulan objek dengan sempadan, dibuka untuk saiz dan rawatan warna. Fikirkan warna sebagai warna sempadan dan sebaliknya. : Anak pertama bukannya: huruf pertama.

Saiz fon ditetapkan dalam fail CSS, sama seperti mana-mana fon lain, menggunakan Viewport, Peratus, Pixels, EM atau Unit REM. Nilai yang ditetapkan dalam piksel berfungsi dengan nilai perpuluhan.

Ciri-ciri teks dan teks teks berfungsi secara lalai. Teks akan menyelaraskan sebarang persediaan walaupun tanpa kandungan teks.

Unsur-unsur peringkat blok (contohnya

,

, ) yang diletakkan di dalam teks akan menyebabkan rehat garis, seperti biasa. Tag
berfungsi seperti yang diharapkan.

Kecuali untuk elemen pemformatan teks (misalnya

-

, , , , , , dan lain -lain) yang memerlukan peraturan baru untuk mempunyai kesan yang tepat pada teks, kebanyakan unsur -unsur semantik (misalnya ,

) bekerja dengan tetapan adat mereka.

Fon

Untuk menguji font dalam kandungan dinamik, sebahagian daripada fungsi PHP telah diterbitkan semula dalam JavaScript, dengan tampal, peristiwa tetikus, kedudukan karet, dan pemilihan teks. Satu kekunci tunggal kini menjadikan semuanya berbaloi.

Font CSS dan ikon pelengkap. Inilah yang sebenarnya memulakan semuanya!

Tinjau! Ditambah () vs minus (-)

Beban segera

Dalam ketiadaan teks sebenar, penyemak imbas tidak menunggu fon dan skrip untuk menjadikan halaman. Fail CSS bersama -sama dengan elemen HTML adalah cache, yang bermaksud beban lebih cepat.

Universal

Setiap penyemak imbas dan pelayan mengiktiraf CSS. Kurang kebimbangan untuk mencari format yang betul yang berfungsi sama dalam setiap penyemak imbas. Pelayan tidak akan menyemak format tertentu untuk membolehkan akses.

Tiada ketergantungan

Fon CSS tidak memerlukan fon alternatif atau sistem untuk memaparkan teks. CSS yang sama yang gaya halaman boleh memasukkan fon. Penyemak imbas tidak akan memaparkan font lalai, tidak sebelum atau selepas beban halaman. Font tidak bergantung pada pihak ketiga dan skrip, dan reka bentuknya tidak berbeza pada penyemak imbas dengan skrip kurang upaya.

Tiada penyembuhan

Font CSS disepadukan sepenuhnya ke dalam laman web, dan menyesuaikan diri dengan susun atur tanpa menggantikan elemen lain pada beban. Setiap harta halaman secara automatik sah untuk teks dan ini akan menunjukkan cara yang dimaksudkan, tanpa kesan selepas atau isu fungsional.

Penggunaan Selektif

Fon boleh dikurangkan kepada bilangan aksara yang terhad. Versi penuh tidak diperlukan jika susun atur mempunyai satu perkataan atau simbol, sebagai contoh.

Keselamatan penuh

Teks sebenar tidak hadir pada halaman, yang bermaksud bahawa maklumat sensitif dapat dengan mudah dipaparkan tanpa takut spam atau phishing.

SEO mesra

Maklumat penting boleh dimasukkan menggunakan sifat tag, dengan cara yang sama atribut ALT berfungsi untuk imej.

Boleh disesuaikan

Untuk membina watak atau fungsi yang kompleks, fon dibuka untuk mana -mana elemen HTML. Tidak perlu skrip untuk mendapatkan butiran khusus kerana setiap perkataan dan huruf mempunyai entiti sendiri dan boleh digayakan secara individu.

Kontekstual

Reka bentuk fon tidak terhad kepada watak -watak yang telah ditetapkan, jadi gaya boleh berubah bergantung pada konteks, tanpa membuat watak baru.

Konsisten

Untuk mengimbangi kekurangan automasi yang terdapat dalam perisian font, dalam CSS, reka bentuk dapat mengawal beberapa elemen sekaligus. Hujah ini sah, kerana perisian font berfungsi dengan kandungan yang sedia ada, sementara CSS berfungsi dengan sifat, mewujudkan templat untuk setiap elemen sedia ada atau masa depan.

Awam

Sesiapa sahaja boleh membuat fon mereka sendiri. Teks pendek boleh diberikan secara manual, dan fungsi PHP bukanlah keperluan.

Asas

Reka bentuk ini boleh diakses dengan mana -mana editor teks atau alat pemaju. Kemahiran asas menggunakan lebar sempadan, jejari sempadan, bentuk dan saiz cukup untuk mengubah reka bentuk mana -mana watak.

Hidup

Setiap hasil pelarasan adalah segera. Penukaran, eksport, muat naik atau langkah lain untuk mengaktifkan fon dihapuskan dari proses tersebut.

Penggunaan Sederhana

Kelajuan halaman mungkin menderita jika fon CSS dijana untuk teks yang dilanjutkan. Teknik ini hanya disyorkan untuk tajuk utama, tajuk, petikan dan perenggan pendek untuk sebab itu.

Biasa

Font CSS tidak akan mendapat manfaat daripada rawatan khas kerana, kepada penyemak imbas, ini hanya elemen HTML yang lain. Akibatnya, tidak ada pengoptimuman atau sokongan kerning. Piksel mempunyai masa yang sukar untuk berkongsi garis nipis dan pada saiz kecil fon boleh dipaparkan dengan tidak betul.

Kod keras

Tetapan fon biasa anda tidak tersedia secara lalai dan tag gaya (misalnya , , dan lain -lain) tidak mempunyai kesan. Fungsi mesti ditetapkan dalam fail CSS dan memerlukan pendekatan yang berbeza, bekerja dengan elemen HTML dan bukannya fon.

Eksklusif

Ini adalah webfont, jadi ia terhad kepada media digital yang dikawal dengan CSS. Kecuali beberapa kesan bitmap, fon hanya boleh diterjemahkan untuk luar talian dengan mencetak dokumen sebagai PDF, yang akan menukar CSS ke dalam format vektor.

Abstrak

Tanpa fail mandiri fon sukar dikenalpasti, diuji, atau dipindahkan. Ia berfungsi seperti warna HTML: ia tidak kelihatan sehingga ia dihasilkan.

Tidak boleh dipilih

Tanpa skrip tambahan, teks tidak boleh dipilih atau digunakan dalam input dan teks. Untuk kandungan dinamik, fungsi memerlukan pengiktirafan keseluruhan watak yang terdapat dalam PHP.

Tidak interaktif

Fungsi paparan yang paling biasa, seperti jenis atau penapis, perlu bekerja dengan kelas, dan bukan dengan kandungan teks.

Tidak boleh dicetak

Cetakan dalam talian hanya menyokong peraturan CSS asas, kadang -kadang mengabaikan grafik yang memihak kepada teks. Kualiti cetakan akan bergantung dengan ketat pada keupayaan penyemak imbas.

Tiada kebolehcapaian

Fon CSS akan menyesuaikan diri dengan zoom halaman, tetapi saiz fon dan bahasa tidak dapat diubah melalui penyemak imbas.
Fungsi penyemak imbas tersuai (misalnya mencari, pembaca) tidak dapat mengakses kandungan teks kerana tidak ada.

Reka bentuk terhad

Tidak ada pelbagai pilihan gaya untuk dipilih dan reka bentuknya terhad kepada keupayaan CSS. Peraturan CSS boleh mempunyai makna yang berbeza untuk penyemak imbas yang berbeza, menyebabkan ketidakkonsistenan. Fon CSS ditulis, tidak ditarik, jadi konsep "buatan tangan" dihapuskan sepenuhnya.

Multitask

Anda perlu tahu CSS anda untuk membuat penyesuaian dalam fon, dan sebaliknya. Proses reka bentuk tidak automatik, dan beberapa sifat yang dihasilkan oleh mesin mesti ditetapkan secara manual.

Tiada perlindungan

Kod reka bentuk boleh diakses oleh sesiapa sahaja, sama seperti mana -mana elemen dalam talian. Reka bentuk tidak boleh dilindungi daripada penyalinan dan penggunaan yang tidak dibenarkan.

Terima kasih kerana membaca! Inilah laman utama fon.

Atas ialah kandungan terperinci Pembuatan (dan faedah berpotensi) fon CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!