Pertanyaan CSS: bagaimana gaya pada tinggi karakter versus tinggi garis


Bersabarlah dengan saya di sini, tetapi dengan asumsi kode ini:

<style>
  span {
    color: black;
    background-color: black;
  }
</style>
<span>Hello world</span>

Halo Dunia

Memberikan hasil yang terlihat seperti ini:

███████████

Apakah mungkin untuk menerapkan gaya hanya pada tinggi surat, versus tinggi font / garis? Akibatnya berakhir dengan sesuatu yang terlihat seperti ini:

█▄██▄ ▄▄▄██


5
2017-08-06 02:39


asal


Jawaban:


Tidak (tidak dengan warna latar belakang). Warna latar belakang berlaku untuk seluruh elemen (misalnya, elemen rentang), yang pada dasarnya adalah kotak yang ditentukan oleh model kotak CSS. Itu rekomendasi resmi dari W3C menentukan bahwa warna latar belakang akan mengisi konten, padding, dan daerah perbatasan dari model kotak. Itu Latar belakang CSS3 (rekomendasi kandidat) menawarkan lebih banyak kekuatan bagi Anda untuk mengontrol di mana warna latar belakang berlaku, tetapi tidak banyak.

Jika Anda benar-benar menginginkan efek yang baru saja Anda tunjukkan dalam pertanyaan Anda, saya pikir fungsi JavaScript untuk mengubah karakter "pendek" (misalnya, "w") menjadi "" dan "tinggi" karakter (misalnya, "h") untuk "█" akan berfungsi dengan baik. Ini demo di jsfiddle.


2
2017-08-06 03:37



Saya tidak bisa memikirkan cara menggunakan HANYA CSS, tetapi Anda bisa menggunakan fungsi dalam PHP seperti imagefontheight: http://php.net/manual/en/function.imagefontheight.php dan secara dinamis membuat elemen pemblokiran Anda dari font yang ditentukan ...


1
2017-08-06 02:51



Satu-satunya cara yang dapat saya pikirkan untuk mendapatkan efeknya murni dengan CSS membutuhkan:

  1. Jumlah berlebihan markup html ekstra.
  2. Kesediaan untuk memberikan sedikit ketidaktepatan sedikit ke ketinggian latar belakang dibandingkan dengan karakter itu sendiri.
  3. Sejumlah besar pengujian pada font tertentu (s) Anda akan menggunakannya untuk melihat hasil apa yang mungkin Anda dapatkan di seluruh browser.

Dengan kata lain: itu benar-benar lebih baik layak usaha, dan itu mungkin harus digunakan hanya pada string teks yang sangat singkat.

Ini contoh biola dengan warna kata yang kontras kiri untuk melihat bagaimana latar belakang cocok dengan huruf. Catatan: ini tidak diragukan lagi akan memiliki beberapa variasi pada tinggi dan jarak di atas / bawah huruf berdasarkan browser dan font yang dilihat oleh Anda. Penggunaan a :before pseudo-element untuk mencapai efek berarti akomodasi perlu dibuat untuk browser yang lebih lama (IE7 dan di bawah).

Inilah kode dasar dalam biola.

<span>H</span><span class="short">e</span><span>l</span><span>l</span><span class="short">o</span><span class="short">w</span> <span class="short">w</span><span class="short">o</span><span class="short">r</span><span>l</span><span>d</span>
  span {
    color: white;
    display: inline-block;
    position: relative;
    height: 1em;
  }

  span:before {
    content: '';
    position: absolute;
    top: .2em;
    right: 0;
    bottom: .1em;
    left: 0;
    background-color: black;
    z-index: -1;
  }

  span.short:before {
    top: .4em;
  }

1
2017-08-06 11:35