Pertanyaan Teks bertitik di css?


Apakah mungkin membuat teks bertitik dengan css?

Saya tahu bahwa hal yang paling jelas adalah menggunakan font bertitik, tetapi Jika saya hanya perlu menggunakan teks putus-putus dengan sedikit, maka setelah pengguna mengunduh seluruh font mungkin berlebihan.

Ide yang saya miliki adalah untuk melapisi teks dengan elemen pseudo dengan pola latar belakang lingkaran transparan kecil dengan latar belakang putih.

Sesuatu seperti ini:

<div class="dottedText">Some dotted text</div>

enter image description here

BIOLA

CSS

.dottedText:after
{
    content: '';
    position:absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 50%, transparent 50%),
    radial-gradient(circle, transparent 20%, white 50%) 30px 30px;
    background-size:4px 4px;
}

Saya pikir saya mungkin dekat, tetapi solusi di atas tidak akan berfungsi dengan baik jika Anda mengubah ukuran font.

Saya mencari solusi di mana

1) Titik-titik akan bertambah besar seiring dengan meningkatnya ukuran font, dan

2) sebaiknya setiap huruf hanya ditampilkan dengan hanya satu baris titik - bukan garis ganda seperti sekarang.

Edit: Ketika saya mengatakan satu baris titik - Maksud saya bahwa setiap stroke harus terdiri dari hanya satu titik. Sebagai contoh: Dalam pemberitahuan gambar di atas bahwa char 'm' memiliki 2 kolom titik .... baik saya lebih suka hanya satu.

Idealnya sesuatu seperti ini (diambil dari sini):

enter image description here

(Saya tidak yakin, tapi mungkin gradien radial perlu di-tweak untuk melakukan ini)

Edit: 

1) Saya tidak keberatan font apa yang digunakan - asalkan itu font built-in. (Bahkan font monospace ok)

2) Solusinya tidak perlu bekerja di setiap browser. (Jadi solusi hanya webkit akan baik-baik saja)


32
2018-06-10 11:39


asal


Jawaban:


Sejujurnya, jawaban ini mungkin terdengar lucu atau aneh, tetapi saya tidak yakin apakah mungkin dengan CSS HANYA (Karena Anda belum menandai bahasa lain), bahkan jika itu, itu akan menjadi berlebihan untuk melakukannya, dan karenanya masuk akal dalam menggunakan font bertitik bukan menulis terlalu banyak baris CSS.

Bahkan jika Anda mengesampingkan IE, Anda hanya akan memiliki satu .woff file yang saya pikir sangat normal, karena akan meningkatkan Anda http permintaan oleh satu, dan tentunya tidak akan terlalu membengkak seperti yang Anda pikirkan.

Daftar font bertitik keren dapat ditemukan di atas sini. Konversikan ttf, menggunakan Layanan Font Squirrel.

Pastikan Anda memiliki izin untuk melakukannya.


Demo Font yang digunakan: Dotline

(File di-host di server saya sendiri, diaktifkan CORS karena demo gagal di Firefox) 

Jika Anda tidak ingin mendukung IE jelek, hanya file yang Anda perlukan woff dan itu hanya 23kb


18
2018-06-10 12:30



Bahkan jika itu bergantung pada gaya inline SVG, inilah yang saya bawa:

<svg xmlns="http://www.w3.org/2000/svg"
 width="1450px" height="300px" viewBox="0 0 800 300">

   <text x="2" y="155" 
    font-family="'Lucida Grande', sans-serif" 
    font-size="222"
    stroke="red"
    stroke-width="3"
    stroke-linecap="round"
    stroke-dasharray="5,5"
    fill="none">
             Some dotted text
</text>

meskipun untuk beberapa alasan stroke-linecap tidak berfungsi ..

Jika Anda ingin bermain dengan cek biola kerja ini .

EDIT-1 (memindahkan svg-style ke CSS)

    svg{ 
        width:1450px;
        height:300;
        viewBox:0 0 1500 300;
      
    }
    text{
      font-family:'Lucida Grande', sans-serif;
      font-size:152px;
      stroke:#000ece;
      stroke-width:3px;
      stroke-linecap:round;
      stroke-dasharray:1,1;
      fill:none;
    
    }
<div class="dott">
<svg xmlns="http://www.w3.org/2000/svg">

  <text  x="2" y="155" >
        

    Some dotted text

  </text></div>


7
2017-12-24 23:46



Dengan beberapa penyesuaian kecil kita bisa mendapatkan cukup dekat:

1) Ubah font-family untuk kurir baru

2) Tambahkan a text-shadow dengan offset horizontal dan vertikal pada div

3) Mengubah unit menjadi ems - (Seperti disarankan @BDawg)

BIOLA

div {
  font-size: 40px;
  font-family: courier new;
  position: relative;
  text-shadow: -.03em -.03em 0 black;
}
.dottedText:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, transparent 50%, transparent 50%), radial-gradient(circle, transparent 20%, white 50%) 30px 30px;
  background-size: .1em .1em;
}
div + div {
  font-size: 60px;
}
div + div + div {
  font-size: 80px;
}
div + div + div + div {
  font-size: 100px;
}
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>


3
2017-12-31 11:43



Tidak bisakah Anda hanya menggunakan Kit webfont untuk font ini?

http://www.fontsquirrel.com/fonts/BPdots?q%5Bterm%5D=dot&q%5Bsearch_check%5D=Y

Anda cukup menautkan CSS Anda seperti ini untuk jenis font yang Anda inginkan:

@font-face {
    font-family: 'bpdotsbold';
    src: url('BPdotsBold-webfont.eot');
    src: url('BPdotsBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('BPdotsBold-webfont.woff') format('woff'),
         url('BPdotsBold-webfont.ttf') format('truetype'),
         url('BPdotsBold-webfont.svg#bpdotsbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Kemudian, tautkan elemen apa pun yang Anda gunakan ke fon ini:

h1{font-family: 'bpdotsbold', arial, helvetica;font-size:80px}

Pastikan untuk mengunggah jalur webfonts ke server Anda dan perbarui masing-masing url('LINKTOFONT') di CSS Anda.

Ada beberapa Dot lain seperti font yang ditawarkan tupai-font:

http://www.fontsquirrel.com/fonts/list/find_fonts?q%5Bterm%5D=dot&q%5Bsearch_check%5D=Y


2
2017-12-24 20:04



Mengubah background-size untuk menggunakan ems.

Sebagai contoh:

background-size: 0.1em 0.1em;

CATATAN: Perubahan di atas mengukur contoh pertama Anda dengan font, tetapi tidak menghasilkan contoh kedua Anda. Saya akan menggunakan inline SVG daripada pendekatan CSS murni jika efek yang tepat adalah mutlak. (Atau pendekatan yang lebih jelas: ubah ke font bertitik)


2
2017-12-30 21:30



Jawaban singkat:

Tidak. Tidak mungkin.

tl; dr;

Saya mencari solusi di mana

1) Titik-titik akan bertambah besar seiring dengan meningkatnya ukuran font, dan

2) sebaiknya setiap huruf hanya ditampilkan dengan hanya satu tunggal   garis titik - bukan garis ganda seperti sekarang.

Edit: Ketika saya mengatakan satu baris titik - maksud saya bahwa setiap stroke   harus terdiri dari hanya satu titik. Misalnya: Pada gambar di atas   perhatikan bahwa char 'm' memiliki 2 kolom titik .... yah saya lebih suka   hanya satu.

Ini tidak dapat dilakukan tanpa font khusus.

Ada dua masalah yang melekat dengan solusi lainnya:

  1. Tidak ada text-fill-pattern dalam CSS. Bahkan di SVG. Ada text-fill-color di CSS dan SVG. Namun, itu terbatas pada implementasi browser-spesifik dan awalan-vendor non-standar dalam CSS. Lalu ada stroke gaya. Ini memiliki keterbatasan yang sama dalam CSS (seperti yang ada pada fill) menjadi tidak standar, dan juga terbatas hanya untuk width dan color. Meskipun, SVG menambahkan stroke-linecap dan stroke-dasharray, tapi hanya itu saja.

  2. text-outline bisa membantu. Jika itu berfungsi seperti border, maka kita bisa melakukan text-outline: Npx dotted red;. Dan meningkatkan Npx untuk hampir menghilangkan text-fill. Tapi, ada masalah lain dengan itu: (1) Spesifikasi mengatakan, itu akan berfungsi sebagai shadow yaitu tanpa gaya. Seperti dalam text-outline: 2px 2px #f00;. Tidak ada solid / dotted / dashed opsi gaya. (2) W3C mengatakan bahwa fitur beresiko dan dapat dipotong dari spec. (3) Sampai sekarang, masih belum diimplementasikan oleh browser apa pun. Ref: http://www.w3.org/TR/2007/WD-css3-text-20070306/#text-outline 

  3. Satu-satunya cara yang ditinggalkan, adalah menggunakan background pola dan kemudian membuatnya clip ke teks. Ini sangat banyak yang sudah Anda coba dalam pertanyaan Anda.

Masalah dengan pendekatan terakhir (latar belakang) adalah bahwa font tidak sama. Bahkan tidak sama. Mesin terbangnya berbeda. Ascenders dan descenders berbeda. Bahkan goresan pada karakter yang sama berbeda.

Ini dapat dipahami oleh ilustrasi ini:

enter image description here

Jika Anda memperhatikan karakter dalam contoh di atas (huruf Times New Roman), sedangkan garis vertikal memiliki lebar yang hampir sama, garis horizontal (bar horizontal dalam "e") lebih sempit. Lebih lanjut, serif juga memiliki lebar yang berbeda dan lancip menjelang akhir. Ketika latar belakang dengan pola diterapkan (mekanisme apa pun, gambar atau SVG atau radial), itu tidak akan berbaris rapi dengan garis font. Karena spasi putih dan font proporsional memiliki jarak yang bervariasi.

Perhatikan keduanya ts dalam ilustrasi di atas ditandai dengan warna merah. Meskipun mesin terbangnya sama, tetapi tergantung pada jarak dari asalnya, pola latar belakang tidak dapat disusun dengan rapi. Jadi sementara yang kedua t memiliki titik-titik berbaris, yang pertama t tidak. Pola terlihat bergeser sebagian dan karenanya ruang putih menonjol. Pergeseran pola yang sama terjadi secara acak di seluruh karakter.

Perhatikan tirus serif dan serif e, seperti ditandai dalam lingkaran merah dalam ilustrasi di atas. Di bagian tengah, font lebih tebal dan mengakomodasi lebih banyak titik dari pola (sebagian penuh, sebagian parsial). Pada serif dan mengecil, ia menjadi lebih sempit dan polanya tidak cocok. Dengan kurva, titik-titik dalam pola tidak bisa bengkok, bagaimanapun pola grid.

Kami tidak dapat mengurangi atau meningkatkan titik-titik individual dalam pola agar sesuai dengan font. Dan kita tidak bisa mengalihkan latar belakang ke line-up di semua karakter. Ketika Anda menggunakan mono-space font, maka masalah jarak proporsional dikurangi sampai batas tertentu, tetapi kurva masih tetap ada dan pola tidak dapat disejajarkan dengan itu.

Sehingga background teknik untuk ini secara inheren cacat. Satu-satunya solusi adalah menggunakan font khusus.

Namun, jika perkiraan cukup baik untuk Anda, maka teknik latar belakang radial Anda bekerja dengan baik. Setidaknya terlepas dari Firefox, teknik Anda sendiri bekerja di browser lain.

Saya juga akan mencoba memberikan satu lagi solusi yang serupa. Menggabungkan pola SVG dengan background-image dan menjaga background-size dalam persen dapat bekerja sampai batas tertentu monospace font dengan ukuran lebih besar.

Penolakan: Potongan ini hanya akan berfungsi dengan browser berbasis webkit (Chrome / Safari), karena browser lain sepertinya tidak mendukung SVG sebagai background-image dan juga -webkit-background-clip: text; adalah, webkit juga tergantung.

Potongan:

.dotted {
    padding: 0px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='4' height='4'><circle cx='2' cy='2' r='2' fill='#f00' stroke='#fff' stroke-width='1'/></svg>");
    font-family: sans-serif;
    font-weight: 300;
    font-size: 32px; background-size: 0.9%;
    -webkit-font-smoothing: antialiased;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
div:nth-of-type(2) { font-size: 64px;  }
div:nth-of-type(3) { font-size: 80px;  }
<div class="dotted">Some dotted text</div>
<div class="dotted">Dotted text</div>
<div class="dotted">More dotted text</div>


2
2017-12-31 16:15



Font ini terlihat mirip dengan apa yang Anda harapkan

http://www.fontsquirrel.com/fonts/Synthetique?q[term]=dot&q[search_check]=Y

dan memiliki 4 ekstensi [TTF, EOT, WOFF, SVG) font yang didukung di semua browser

harap ini akan membantu Anda


1
2017-12-27 12:10