Sifat CSS untuk mengawal tipografi web

Takeaways Key

sifat CSS membolehkan manipulasi tepat tipografi web, mencerminkan tradisi yang kaya dengan tipografi cetak sambil menampung aspek unik media web.
Harta `Teks-Transform` dalam CSS membolehkan manipulasi kes huruf, menawarkan pilihan seperti` memanfaatkan`, `huruf besar`,` huruf kecil`, dan `penuh lebar`, setiap keperluan reka bentuk yang berbeza.
Pengurusan ruang putih dalam dokumen HTML boleh dikawal melalui harta tanah `putih ', dengan nilai seperti` normal`, `pra`,` pra-wrap`, `pra-line`, dan` nowrap` untuk mengendalikan Senario pemformatan yang berbeza.
Untuk mengawal pemecahan garis dalam kata-kata, CSS menyediakan `word-wrap` atau` overflow-wrap` harta dengan pilihan `normal` dan` break-word`, di samping harta `Hyphens` untuk kawalan hyphenation.
• CSS menawarkan sifat-sifat `kata-kata 'dan` huruf-huruf` untuk menyesuaikan ruang antara kata-kata dan huruf, meningkatkan kebolehbacaan dan daya tarikan estetika teks.
penjajaran teks lanjutan dan lekukan dikendalikan melalui sifat-sifat seperti `teks-align`,` teks-align-last`, dan `teks-indent`, memberikan pereka kawalan halus ke atas persembahan teks.
• Typography Web mempunyai kelebihan melukis kekayaan pengetahuan milik tradisi tipografi cetak berabad-abad lamanya. Dengan tanda yang sama, tradisi itu membawa piawaian amalan terbaik dan kecemerlangan bahawa tipografi web dipanggil untuk hidup.
Walau bagaimanapun, web sebagai medium komunikasi datang dengan keanehannya sendiri. Begitu banyak sehingga kita dipimpin untuk berfikir bahawa langkah lancar dari cetakan ke tipografi web adalah panggilan yang sukar. Dalam bukunya mengenai tipografi web, ms.110, Jason Santa Maria menerangkan:

Buku bercetak adalah format statik. Dari susun atur buku pereka buku itu ke perjalanannya ke katil akhbar, gudang, rak buku, dan tangan anda, output buku itu tidak berubah. Ia disampaikan tepat seperti pereka yang mengandungnya.

Ketika datang ke web, laman web yang sama dapat dialami sangat berbeza menurut beberapa faktor, mis., Pelbagai jenis peranti, resolusi skrin, tetapan penyemak imbas yang diperibadikan, dan lain -lain. Beberapa faktor ini, seperti Jason lagi menerangkan ...

... boleh memberi kita gambaran bahawa jenisnya terlalu kecil, yang lain boleh menyebabkan kita terlepas sesuatu yang penting di luar skrin, dan yang lain mungkin membuat hampir mustahil untuk melihat laman web sama sekali.

yang mengatakan, ia juga benar bahawa "web adalah tempat terbaik untuk teks.", Seperti yang dikatakan oleh Tim Brown dalam ceramahnya mengenai tipografi sejagat. Teks di Internet boleh "dicari, disalin, diterjemahkan, dihubungkan dengan dokumen lain, ia boleh dicetak, ia mudah, ia boleh diakses".

Fleksibiliti web tidak bermaksud melepaskan kawalan. Sebaliknya, sebagai pereka web, kami masih dijangka membuat pilihan yang tepat tentang apa sahaja yang kami masukkan ke dalam kerja kami, dan teks tidak terkecuali. Cara elemen teks dibentangkan, warna, saiz, jenis huruf, semua ini dan lebih banyak menyampaikan mesej dan jenama teras laman web.

Untuk memanipulasi penampilan teks di web, alat pilihan utama kami ialah CSS.

sifat CSS yang akan saya sampaikan dalam siaran ini boleh didapati dalam spesifikasi modul teks CSS.

Modul ini menerangkan kawalan jenis CSS; iaitu,
Ciri -ciri CSS yang mengawal terjemahan teks sumber ke
Formatted, teks yang dibungkus garis.

Dengan kata lain, modul teks CSS berurusan dengan paparan aksara dan kata -kata dalam penyemak imbas, dan bagaimana ia jarak, diselaraskan, dihubungkan, dan lain -lain, menggunakan CSS.

Apa yang membentuk unit asas teks atau perkataan, serta di mana betul -betul perkataan dibenarkan untuk memecahkan sekeping teks yang diberikan, dengan ketara bergantung pada peraturan bahasa yang digunakan di laman web. Atas sebab ini, penting untuk mengisytiharkan maklumat ini dalam dokumen HTML (biasanya dalam atribut Lang dari elemen ).

di sini, saya tidak akan membincangkan dua topik berikut:

• fon, iaitu, perwakilan visual aksara, iaitu glyphs, dan sifat mereka;
Ciri -ciri CSS yang berkaitan dengan hiasan teks, seperti garis bawah, bayang -bayang teks, dan tanda penekanan.

Jika anda ingin tahu, anda akan dapati dokumentasi terkini mengenai fon dan ciri -ciri hiasan teks dalam modul fon CSS Tahap 3 dan modul Hiasan Teks CSS masing -masing.

memanipulasi kes huruf

Terdapat masa apabila elemen teks perlu dipaparkan dalam huruf besar, misalnya nama pertama dan terakhir. CSS memberi kita kawalan pada kes huruf dengan harta perubahan teks.

Nilai lalai harta transform teks tidak ada, iaitu, tidak ada kesan pada kes huruf yang digunakan.

nilai memanfaatkan

Jika anda ingin huruf pertama setiap perkataan dipaparkan di huruf besar sambil meninggalkan penampilan semua huruf lain yang tidak terjejas (apa pun kes mereka dalam dokumen HTML), menggunakan nilai yang akan dicapai ini:

html:

CSS:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

Perhatikan bagaimana memanfaatkan tidak mengikuti konvensyen kes tajuk: Malah, semua huruf pertama dalam contoh di atas muncul dipermodalkan, termasuk perkataan "in". Penulis yang berhasrat untuk mengikuti konvensyen sastera mengenai tajuk perlu memanipulasi huruf secara manual dalam teks sumber.

Nilai huruf besar

Jika matlamat anda adalah untuk mempunyai semua huruf yang dipaparkan dalam huruf besar, tidak kira kes mereka dalam dokumen HTML, huruf besar adalah nilai yang sesuai untuk digunakan:

html:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

CSS:

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

Nilai huruf kecil

Menggunakan huruf kecil akan menyebabkan semua huruf dipaparkan dalam huruf kecil. Secara semulajadi, ini tidak akan menjejaskan penampilan huruf yang sudah huruf kecil dalam dokumen sumber asal.

html:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

CSS:

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

nilai lebar lebar

Spesifikasi telah menambah nilai baru, lebar penuh. Nilai ini menghalang watak untuk muncul di dalam persegi seolah -olah ia adalah watak ideografi, mis., Jepun, Cina, dan lain -lain. Ini memudahkan menjajarkan watak -watak Latin dengan watak ideografi.

tidak semua aksara mempunyai bentuk lebar penuh yang sepadan, di mana watak-watak kes tidak akan dipengaruhi oleh nilai lebar penuh.

html:

<span><span><span><h2</span>></span>Alice's Adventures in Wonderland<span><span></h2</span>></span></span>

CSS:

<span>h2 {
</span>  <span>text-transform: lowercase;
</span><span>}</span>

inilah watak-watak yang kelihatan seperti di Firefox apabila lebar penuh digunakan:

Kenyataan lanjut

Sokongan penyemak imbas untuk harta perubahan teks sangat baik. Malah, semua pelayar utama menyokongnya.

Satu-satunya pengecualian adalah nilai lebar penuh, yang pada masa ini hanya berfungsi di Firefox. Mungkin difahami begitu, memandangkan kebarangkalian lebar penuh berisiko jatuh pada peringkat cadangan calon spec.

Selanjutnya, saya perhatikan ketidakkonsistenan kecil antara Firefox (v.39) dan penyemak imbas utama lain dalam menjadikan nilai memanfaatkan pada perkataan yang dihubungkan.

inilah yang kelihatan seperti di Firefox:

Perhatikan bagaimana huruf pertama selepas tanda hubung tidak dipermodalkan. Sebaliknya, di bawah adalah teks yang sama yang dipaparkan dalam Chrome:

Dalam contoh ini, huruf berikutan watak tanda hubung tidak terkecuali; Mereka juga dipaparkan dengan surat modal. Saya telah melihat tingkah laku yang sama dalam pembebasan terkini semua pelayar utama lain kecuali, seperti yang dinyatakan di atas, Firefox.

Akhirnya, fikiran Cascade! Jika anda menetapkan harta transform teks pada elemen kontena, nilainya diwarisi oleh semua elemen anaknya. Untuk mengelakkan hasil yang tidak diingini, tetapkan semula nilai teks-perubahan elemen kanak-kanak kepada tiada.

Lihat demo untuk nilai-nilai transformasi teks.

bagaimana menangani ruang putih

Apabila anda menekan kekunci tab, kekunci ruang, atau paksa beberapa teks untuk memecahkan baris seterusnya (menggunakan kekunci enter atau tag
), anda membuat ruang putih di sumber anda Dokumen.

Secara lalai, pelayar runtuh urutan ruang putih ke dalam satu ruang, rehat garis dikeluarkan, dan garis bungkus teks agar sesuai dengan bekas mereka. Ini mudah untuk kita kerana ia membolehkan kita untuk indent dan terpisah teks teks untuk memastikan dokumen sumber kita boleh dibaca dan dikekalkan tanpa memberi kesan bagaimana kandungan dipaparkan dalam penyemak imbas.

Walau bagaimanapun, bagaimana jika ini bukan matlamat anda? Katakan, contohnya, anda ingin mengekalkan ruang putih yang anda buat dalam dokumen HTML. Senario yang biasa adalah apabila anda menulis beberapa teks yang direka untuk dipaparkan sebagai coretan kod yang diindentasi dengan betul. Atau, anda ingin beberapa teks dipaparkan semua pada satu baris, tanpa pecah.

Pada masa-masa seperti itu, apabila anda berhasrat untuk mengatasi tingkah laku lalai penyemak imbas, harta ruang putih menawarkan beberapa pilihan yang menarik.

Kata kunci biasa menetapkan semula penyemak imbas ke tingkah laku lalainya: semua ruang putih tambahan runtuh ke dalam satu aksara dan garis bungkus apabila mereka mencapai pinggir bekas mereka.

Nilai pra

Kata kunci pra membolehkan anda memaparkan teks dengan memelihara semua ruang putih dan memaksa barisan baru yang terdapat dalam dokumen sumber. Teks tidak akan dibungkus ke dalam barisan baru apabila melimpah bekasnya.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

Jika anda menggunakan tab untuk membuat ruang putih, anda boleh mengawal saiznya dengan harta saiz tab dengan menetapkannya kepada nilai integer.

saiz tab adalah harta dengan sokongan penyemak imbas yang tidak konsisten, tetapi jika anda benar-benar tidak dapat menahan panjang aksara tab lalai, inilah polyfill untuk menutup semua pangkalan anda.

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

Nilai pra-wrap

katakan anda ingin ruang putih dalam dokumen sumber untuk dipelihara dalam paparan penyemak imbas. Walau bagaimanapun, anda juga ingin membiarkan garis membungkus ketika mereka mencapai pinggir bekas mereka.

Kata kunci pra-pembungkus akan membantu anda mencapai hasil yang diinginkan.

Perhatikan bagaimana setiap baris yang dipaparkan dalam penyemak imbas mencerminkan rehat terpaksa dalam kod sumber, walaupun bekas mempunyai banyak ruang untuk menyesuaikan lebih banyak teks:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

Walau bagaimanapun, mengecilkan skrin penyemak imbas anda dan anda akan melihat garis pembalut agar sesuai dengan bekas mereka.

Nilai pra-line

Nilai menarik akhir untuk harta ruang putih adalah pra-baris. Setakat yang runtuh urutan ruang ke dalam satu ruang dan membolehkan pembalut, ia berkelakuan seperti biasa. Walau bagaimanapun, di mana watak baris baru atau tag
hadir dalam dokumen HTML, ini dipelihara dalam paparan penyemak imbas.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

Cubalah demo Codepen untuk kata kunci pra, pra-membungkus dan pra-line.

Nilai NODRAP

NOWRAP mungkin nilai ruang putih yang paling terkenal. Adakah reka bentuk anda memerlukan sekeping kandungan sebaris tidak boleh dibungkus? Menggunakan ruang putih: nowrap; pada elemen anda melakukan silap mata.

Louis Lazaris menunjuk kepada kes penggunaan berikut untuk nilai ini.

di atas adalah pautan yang diikuti oleh simbol ». Memiliki watak ini jatuh ke baris seterusnya, contohnya dalam susun atur web cecair, tidak akan diingini.

Dalam keadaan ini dan serupa (memikirkan ikon, contohnya), nilai NOWRAP cukup berguna.

Satu lagi kes penggunaan yang menarik dibawa kepada kami oleh Sara Soueidan dalam rujukan Codrops CSS. Sara menunjukkan bahawa harta ruang putih boleh digunakan untuk sebarang kandungan sebaris, termasuk imej.

Ia digunakan dengan nilai NowRap kadang -kadang untuk membuat senarai imej mendatar dalam elemen scrollable, dengan menghalang imej dari membungkus dan memaksa mereka dipaparkan pada satu baris tunggal di dalam bekas mereka.

Saya telah membesarkan cadangan ini dengan membuat karusel jQuery asas menggunakan ruang putih: NOWRAP. Inilah demo:

Lihat pena menggunakan harta Word-Wrap pada karusel imej oleh SitePoint (@SitePoint) pada Codepen.

Mengawal Break Line Inside Words

Kadang -kadang ia berlaku bahawa reka bentuk kelihatan kerana perkataan yang panjang gagal membungkus ke baris seterusnya, dengan itu melimpah bekasnya. URL panjang atau beberapa perkataan panjang yang dihasilkan oleh pengguna dalam komen blog adalah senario biasa.

Ciri -ciri CSS berikut direka untuk memberi kita beberapa ukuran kawalan untuk mengendalikan kata -kata panjang di web.

Hartanah Word-Wrap/Overflow-Wrap

Harta limpahan-limpahan (sebelum ini dipanggil Word-Wrap, disokong sepenuhnya dan bekerja di semua pelayar utama untuk alasan warisan) berkuatkuasa jika harta ruang putih membolehkan pembungkus teks. Ia boleh mempunyai satu daripada dua nilai: normal dan break-word.

dengan menggunakan nilai normal, kata -kata memecahkan titik pemecahan yang dibenarkan, mis., Ruang, tanda hubung, dan lain -lain

Nilai break-word membenarkan titik pemecahan sewenang-wenang di dalam perkataan jika garis tidak boleh dipecahkan pada titik lain yang boleh diterima.

Imej di bawah menunjukkan paparan perkataan panjang yang melimpah bekasnya:

mari kita tetapkan harta benda limpahan, dan juga, untuk tujuan warisan, harta pembungkus perkataan, kepada nilai break-word:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

... dan paparan kata panjang kini dipecah menjadi pelbagai baris agar sesuai dengan ruang yang ada.

Harta Hyphens

memecahkan kata -kata panjang semuanya baik dan baik. Walau bagaimanapun, teks yang dihasilkan boleh membingungkan kepada pembaca. Pilihan yang lebih baik adalah untuk menghancurkan perkataan kerana ia pecah ke baris seterusnya. Dengan cara ini, ia segera jelas kepada pembaca yang mereka lihat pada satu perkataan membungkus ke pelbagai baris. Untuk mencapai matlamat ini, CSS menawarkan harta Hyphens, yang boleh anda gunakan bersempena dengan Word-Wrap: Break-word.

Lebih khusus lagi, nilai auto harta Hyphens membolehkan anda memaparkan tanda hubung pada titik di mana kata -kata memecah ke baris seterusnya, jika peraturan bahasa dokumen membenarkannya atau hyphenation hadir dalam sumber HTML. Untuk ini berfungsi, pastikan anda menetapkan atribut Lang ke bahasa yang anda inginkan dalam dokumen HTML:

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

anda juga boleh menghalang paparan aksara hipphen. Dalam kes ini, tetapkan harta Hyphens kepada tiada:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

Selain itu, anda boleh memaparkan aksara tanda hubung pada garis pecah dalam kata -kata, jika kata -kata dihubungkan dalam markup dan teks membungkus ke baris seterusnya. Ini dilakukan dengan nilai manual:

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

dibantu oleh awalan vendor, sokongan pelayar untuk harta Hyphens adalah baik pada semua pelayar utama, walaupun tidak tanpa sedikit ketidakkonsistenan. Versi terkini Chrome (v.44) dan Opera (v.30) pada masa penulisan tidak menyokong nilai harta tanah.

Lihat contoh di atas pada codepen

memanipulasi ruang antara perkataan dan huruf

Apa yang membuat sekeping teks lebih kurang dibaca sering bergantung kepada beberapa faktor. Dalam sesetengah kes, meningkatkan atau mengurangkan ruang antara setiap perkataan atau setiap huruf tunggal, iaitu

Penjejakan

, membawa peningkatan yang besar.

CSS menawarkan sifat-sifat spoking dan huruf-huruf untuk mengawal penampilan jarak antara kata-kata dan huruf masing-masing.

Harta Perkataan Perkataan di bawah adalah nilai untuk harta kata-kata:

• normal
Peratusan

Normal memaparkan ruang lalai antara huruf. Jumlah ruang bergantung pada fon yang digunakan atau penyemak imbas.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

membolehkan anda menambah jarak antara kata sebagai tambahan kepada jarak lalai yang ditakrifkan oleh font atau penyemak imbas.

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

Peratusan berfungsi dengan cara yang sama seperti tetapi menggunakan nilai peratusan. Saya tidak menemui sebarang pelaksanaan pelayar untuk IT dan peratusan berisiko dikeluarkan dari draf masa depan spesifikasi.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

Harta Surat Spacing

anda boleh menetapkan harta yang mengamati huruf kepada salah satu daripada dua nilai: normal atau .

Menggunakan daun normal jarak fon lalai antara huruf. Ia juga menetapkan semula panjang panjang surat yang dinyatakan sebelum ini kepada nilai lalai. Contohnya, jika anda menentukan nilai jarak surat 1EM pada elemen induk tetapi ingin memaparkan nilai lalai pada unsur-unsur kanak-kanak, normal adalah rakan anda.

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

Nilai adalah unit pengukuran, mis. PX atau EMS, di mana anda boleh meningkatkan jarak antara huruf selain jarak lalai yang telah disediakan oleh font.

<span><span><span><h2</span>></span>Alice's Adventures in Wonderland<span><span></h2</span>></span></span>

Butiran lanjut

Word-Spacing bukan sahaja terpakai kepada kata-kata. Anda boleh menggunakannya pada apa-apa jenis kandungan sebaris atau sebaris.

Juga, anda boleh menghidupkan kedua-dua perkataan dan spacing huruf. Walau bagaimanapun, dengan menggunakan peralihan CSS pada jarak huruf menunjukkan bahawa nilai normal tidak diiktiraf oleh versi semasa Firefox (v.39). Untuk mengatasinya, hanya ganti normal dengan 0em.

Berikut adalah demo dengan teks animasi menggunakan kata-kata dan surat-surat:

Lihat pena yang menghidupkan sifat-sifat spekulasi CSS dan kata-kata oleh SitePoint (@SitePoint) pada Codepen.

pilihan CSS terkini untuk penjajaran teks

Harta Text-Align telah wujud untuk beberapa waktu. Ia mengawal bagaimana kandungan sebaris seperti teks dan imej diselaraskan di dalam bekas blok. KeWords kiri dan kanan menyelaraskan kandungan dalam talian ke kiri dan kanan masing -masing. Menetapkan Teks-Align ke Pusat menyelaraskan kandungan ke pusat bekasnya. Akhirnya, kata kunci Justify membenarkan kandungan supaya setiap baris adalah panjang yang sama (kecuali untuk baris terakhir, jika ia tidak cukup lama untuk mencapai tepi bekasnya).

Spec menambah dua nilai baru yang boleh menjadi sangat berguna di laman web antarabangsa menggunakan sistem bahasa kanan-ke-kiri (RTL): Mula dan akhir.

Untuk pembaca kiri-ke-kanan (LTR), mereka sesuai dengan kiri dan kanan masing-masing. Apabila laman web menggunakan bahasa RTL, mulakan sepadan dengan kanan dan akhir sepadan dengan kiri.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

Memohon Teks-Align: Perlawanan-ibu bapa kepada elemen kanak-kanak sebaris memastikan bahawa kanak-kanak mewarisi penjajaran yang sama sebagai ibu bapa. Nilai permulaan atau akhir yang diwarisi dikira terhadap arah bahasa induk yang mengakibatkan output sama ada kiri atau kanan.

Harta Teks-Align-Last

Baru ke CSS juga merupakan harta Teks-Align-Last. Harta ini mengawal penjajaran baris terakhir

yang dibenarkan

teks sebelum akhir perenggan atau sebelum tag
. Ia mempunyai nilai kata kunci yang sama seperti Teks-Align, kecuali Auto, yang merupakan nilai lalai. Nilai auto membolehkan anda menyelaraskan baris teks terakhir mengikut nilai harta penyaringan teks elemen, jika ditetapkan. Sekiranya tiada harta penyaringan teks digunakan, teks mungkir kepada nilai permulaan. Pada masa penulisan, sokongan penyemak imbas untuk teks-align-last agak miskin. Oleh itu, pandangan saya bahawa ia harus digunakan dengan berhati -hati, jika sama sekali.

Lihat demo codepen yang menunjukkan ciri -ciri ini dalam tindakan

indenting text

Memikat garis teks, biasanya baris pertama dalam perenggan, bukan sesuatu yang sering anda jumpai di laman web. Sebaliknya, garis kosong diletakkan sebagai tanda visual biasa pemisahan antara perenggan.

Walau bagaimanapun, yang memaparkan baris pertama perenggan kadang -kadang digunakan untuk membuat rupa klasik yang sesuai dengan reka bentuk tertentu.

Jika reka bentuk anda dipertingkatkan dengan teknik ini, CSS menawarkan harta inden teks. Mari kita pertimbangkan nilai yang mungkin.

Nilai panjang biasanya ditetapkan menggunakan unit px atau em:

Peratusan ditetapkan menggunakan nilai peratusan:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

nilai setiap baris menunjukkan penampilan baris pertama di dalam bekas blok serta setiap baris selepas rehat garis paksa, ia Memasukkan tag
dalam sumber HTML. Walau bagaimanapun, paparan baris pertama selepas bungkus lembut, iaitu, teks yang dibungkus ke baris seterusnya agar sesuai dengan bekasnya, tidak terjejas.

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

nilai gantung menyebabkan semua baris kecuali baris pertama dipaparkan sebagai diindentasi.

nilai setiap baris dan gantung adalah nilai eksperimen, belum dilaksanakan dalam mana-mana pelayar pada masa penulisan.

Lihat demo ini untuk melihat inden teks dalam tindakan

Kesimpulan

CSS telah membuat kemajuan besar ke arah manipulasi teks web, walaupun lebih banyak dijangka dilakukan. Selain sokongan penyemak imbas untuk beberapa sifat terbaru, contohnya, jika CSS menawarkan keupayaan Kerning, iaitu peluang untuk memanipulasi jarak antara dua huruf dalam perkataan tertentu.

Dalam siaran ini saya menyelidiki beberapa sifat CSS yang mengawal pemformatan, pembungkus baris, dan penjajaran teks di web. Jangan ragu untuk bereksperimen dengan ini menggunakan demo.

Saya menantikan maklum balas anda!

Soalan Lazim (Soalan Lazim) Mengenai Properties CSS Untuk Mengawal Tipografi Web

Bagaimana saya boleh menggunakan sifat CSS untuk mengawal tipografi web?

Properties CSS menyediakan pelbagai pilihan untuk mengawal tipografi web. Anda boleh menyesuaikan saiz fon, keluarga font, ketinggian garis, penjajaran teks, warna teks, dan banyak lagi. Sebagai contoh, untuk menukar saiz fon, anda boleh menggunakan harta 'saiz fon' dan menentukan saiz dalam piksel, EMS, atau peratusan. Begitu juga, untuk menukar keluarga font, anda boleh menggunakan harta 'font-family' dan menentukan nama fon. Ingat untuk memasukkan fon sandaran sekiranya pilihan pertama tidak tersedia pada sistem pengguna.

'Harta dalam CSS digunakan untuk menyelaraskan kandungan sebaris elemen blok. Ia boleh mengambil nilai seperti 'kiri', 'betul', 'pusat', atau 'mewajarkan'. Sebagai contoh, 'Text-Align: Center' akan memusatkan teks dalam elemen yang mengandunginya. Harta ini amat berguna apabila anda ingin mengawal penjajaran teks dalam tajuk, perenggan, atau elemen yang mengandungi teks lain. Property White-Space 'di CSS digunakan untuk mengawal bagaimana ruang putih di dalam elemen dikendalikan. Ia boleh mengambil nilai seperti 'normal', 'nowrap', 'pre', 'pre-line', atau 'pre-wrap'. Sebagai contoh, 'ruang putih: NOWRAP' akan menghalang teks daripada membungkus ke baris seterusnya, menjadikan semua teks muncul dalam satu baris. 🎜>

Untuk menyelaraskan item senarai ke kiri di CSS, anda boleh menggunakan harta 'Teks-Align' dengan nilai 'Kiri'. Sebagai contoh, 'Text-Align: Kiri' akan menyelaraskan item senarai ke kiri. Ini adalah penjajaran lalai untuk kebanyakan penyemak imbas, tetapi menyatakan ia dapat membantu memastikan konsistensi merentasi penyemak imbas yang berbeza. 'Harta dalam CSS digunakan untuk mengawal ruang antara garis teks. Anda boleh menentukan ketinggian garis dalam unit mutlak seperti piksel, unit relatif seperti peratusan, atau nombor tanpa unit yang didarab dengan saiz fon semasa untuk menetapkan ketinggian garis. Sebagai contoh, 'ketinggian garis: 1.5' akan menetapkan ketinggian garis kepada 1.5 kali saiz fon semasa.

Bagaimana saya boleh menukar warna teks dalam css?

Harta 'warna' dalam CSS digunakan untuk menukar warna teks. Anda boleh menentukan warna dengan cara yang berbeza, seperti namanya (seperti 'merah'), nilai heksadesimal (seperti '#ff0000'), nilai RGB (seperti 'RGB (255, 0, 0)'), atau nilai HSL (seperti 'HSL (0, 100%, 50%)'). Properti 'Font-Weight' di CSS digunakan untuk membuat teks berani. Anda boleh menetapkan nilainya kepada 'berani' atau nombor dari 100 hingga 900 dalam gandaan 100, di mana nombor yang lebih tinggi sesuai dengan teks yang lebih berani. Sebagai contoh, 'Font-Weight: Bold' atau 'Font-Weight: 700' akan membuat teks berani. Harta dalam CSS digunakan untuk merasmikan teks. Anda boleh menetapkan nilainya kepada 'Italic' untuk membuat teks italic. Sebagai contoh, 'font-style: italic' akan merapikan teks.

Bagaimana saya boleh menggariskan teks dalam CSS? Anda boleh menetapkan nilainya untuk 'menggariskan' untuk menggariskan teks. Contohnya, 'Teks-dekorasi: garis bawah' akan menggariskan teks. ruang antara huruf. Anda boleh menentukan jarak huruf dalam unit mutlak seperti piksel atau unit relatif seperti EMS. Sebagai contoh, 'Surat-Spacing: 0.1EM' akan meningkatkan ruang antara huruf sebanyak 0.1 kali saiz fon semasa.

Atas ialah kandungan terperinci Sifat CSS untuk mengawal tipografi web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!