Beranda>Sumber daya pembuatan situs web>Pengunduhan font
Unduh


Zfont

Plugin teks untuk mesin 3D ZDOG! Merender truetype font melalui Typr.js | jaames.github.io/zfont

Fitur | Peringatan | Demo | Instalasi | Penggunaan | API | Zdog.font | Zdog.text | Zdog.textgroup | Todo | Bangunan


Fitur

  • Dibangun di atas typr.js, yang mendukung berbagai font .tf dan .otf dengan kecepatan dan rahmat
  • Kurang dari 14kb Minified dan Gzipped
  • Tidak perlu khawatir menunggu font dimuat; teks secara otomatis muncul setelah font siap
  • Termasuk dukungan untuk teks multiline
  • Perbarui font, teks, warna, penyelarasan, dll kapan saja
  • Utilitas bonus untuk mengukur teks, menunggu beban font & lainnya!

Peringatan

  • Anda harus menyediakan .TTF untuk menggunakan diri Anda sendiri; Tidak mungkin menggunakan font sistem
  • Rentang karakter terbatas untuk mesin terbang mana pun yang didukung oleh font yang Anda pilih, dan tumpukan font/fallback belum didukung

Demo

Demo langsung dapat ditemukan di sini, ada juga beberapa contoh mendalam tentang codepen!

Instalasi

Instal dengan NPM 

$ npm install zfont --save

Jika Anda menggunakan bundler modul seperti Webpack atau Rollup, impor Zfont ke proyek Anda: 

 // Using ES6 module syntax
import Zfont from 'zfont' ;

// Using CommonJS modules
const Zfont = require ( 'zfont' ) ;

Menggunakan jsdelivr cdn 

 < script src =" https://cdn.jsdelivr.net/npm/zfont/dist/zfont.min.js " > </ script >

Saat secara manual termasuk perpustakaan seperti ini, itu akan tersedia secara global di window.Zfont

Unduh dan host diri Anda sendiri

Versi Pengembangan
Tidak terkompresi di sekitar 75kb, dengan komentar sumber disertakan

Versi produksi
Minified hingga 45kb

Kemudian tambahkan ke <head> halaman Anda dengan tag <script> : 

 < html >
  < head >
    <!-- ... -->
    < script src =" ./path/to/zfont.min.js " > </ script >
  </ head >
  <!-- ... -->
</ html >

Penggunaan

Daftar plugin

Setelah ZDOG dan ZFONT diimpor/diunduh, kita perlu menginisialisasi plugin Zfont. Setelah diinisialisasi, kelas Zdog.Font , Zdog.Text dan Zdog.TextGroup akan tersedia: 

 Zfont . init ( Zdog ) ;

Halo dunia

(Pssst! Jika Anda lebih suka menyelam, lihat demo dasar di atas codepen)

Untuk menggambar beberapa teks dalam adegan zdog, pertama -tama kita perlu mengatur objek Zdog.Font baru dengan url .ttf untuk font yang kita inginkan, maka kita dapat membuat objek Zdog.Text baru dan menambahkannya ke ilustrasi seperti bentuk lainnya: 

 // Initialize Zfont
Zfont . init ( Zdog ) ;


// Create a Zdog illustration
let illo = new Zdog . Illustration ( {
  element : '.zdog-canvas'
} ) ;

// Set up a font to use
let myFont = new Zdog . Font ( {
  src : './path/to/font.ttf'
} ) ;

// Create a text object
// This is just a Zdog.Shape object with a couple of extra parameters!
new Zdog . Text ( {
  addTo : illo ,
  font : myFont ,
  value : 'Hey, Zdog!' ,
  fontSize : 64 ,
  color : '#fff'
} ) ;

// Animation loop
function animate ( ) {
  illo . updateRenderGraph ( ) ;
  requestAnimationFrame ( animate ) ;
}
animate ( ) ;

Teks multiline

Baik Zdog.Text dan Zdog.TextGroup mendukung teks multiline, dengan memasukkan karakter garis baru ( n ) di mana pun Anda ingin menambahkan jeda baris: 

 new Zdog . Text ( {
  ...
  value : 'The quick brown foxnjumps over thenlazy zdog' ,
} ) ;

Untuk keterbacaan yang lebih baik, Anda mungkin lebih suka menggunakan array string untuk opsi value . Dalam hal ini, setiap string dalam array akan diperlakukan sebagai garis teks terpisah: 

 new Zdog . Text ( {
  ...
  value : [
    'The quick brown fox'
    'jumps over the' ,
    'lazy zdog'
  ]
} ) ;

Menunggu font memuat

Dalam kebanyakan kasus, Anda tidak perlu khawatir menunggu font dimuat, karena objek teks akan muncul secara ajaib setelah font mereka siap digunakan. Namun, plugin ini juga menyediakan fungsi utilitas Zdog.waitForFonts() jika Anda perlu menunda apa pun sampai semua font dalam adegan Anda selesai memuat.

Misalnya, mari kita ubah loop animasi dari contoh sebelumnya sehingga tidak dimulai sampai font siap: 

 // Animation loop
function animate ( ) {
  illo . updateRenderGraph ( ) ;
  requestAnimationFrame ( animate ) ;
}
// Zdog.waitForFonts() returns a Promise which is resolved once all the fonts added to the scene so far have been loaded
Zdog . waitForFonts ( ) . then ( ( ) => {
  // Once the fonts are done, start the animation loop
  animate ( ) ;
} )

API

Zdog.font

Mewakili font yang dapat digunakan oleh instance dari Zdog.Text atau Zdog.TextGroup . 

 let font = new Zdog . Font ( {
  src : './path/to/font.ttf'
} )

Opsi

Param Detail Bawaan
src Jalur url font. Ini bisa berupa .ttf atau .otf font, lihat repo Typr.js untuk detail lebih lanjut tentang dukungan font ''

Metode

measureText(text, fontSize)

Dapatkan pengukuran untuk text string yang ditentukan saat diterjemahkan pada fontSize (diukur dalam piksel), mirip dengan Canvas​Rendering​Context2D.measure​Text() .

Mengembalikan objek dengan width , height , descender , ascender .

getTextPath(text, fontSize, x=0, y=0, z=0, alignX='left', alignY='bottom')

Mengembalikan array perintah jalur zdog untuk text string yang ditentukan, ketika diterjemahkan pada fontSize (diukur dalam piksel).

  • ( x , y , z ) adalah titik asal jalur
  • alignX adalah penyelarasan teks horizontal (setara dengan properti text-align CSS); baik "left" , "center" atau "right" .
  • alignY adalah penyelarasan teks vertikal; baik "top" , "middle" atau "bottom".
waitForLoad()

Mengembalikan janji yang diselesaikan setelah font ini selesai memuat.

Zdog.text

Objek yang digunakan untuk rendering teks. Ini mewarisi segalanya dari kelas Zdog.Shape . 

 new Zdog . Text ( {
  addTo : illo ,
  font : font ,
  value : 'Hey, Zdog!' ,
  textAlign : 'center' ,
  textBaseline : 'middle' ,
  color : '#5222ee' ,
  stroke : 1 ,
} )

Opsi

Zdog.Text mewarisi semua opsi dari kelas Zdog.Shape , ditambah beberapa tambahan:

Param Detail Bawaan
font Zdog.Font untuk digunakan untuk teks ini. Ini diperlukan. null
value String teks ''
fontSize Ukuran teks, diukur dalam piksel 64
textAlign Penyelarasan teks horizontal, setara dengan properti CSS text-align . Ini bisa menjadi 'left' , 'center' atau 'right' 'left'
textBaseline Penyelarasan teks vertikal, setara dengan properti textBaseline Canvas HTML5. Ini bisa menjadi 'top' , 'middle' atau 'bottom' 'bottom'

Properti

Zdog.Text mewarisi semua properti dari kelas Zdog.Shape , serta beberapa tambahan. Semua properti ini dapat diperbarui kapan saja dan teks yang diberikan akan diperbarui secara otomatis.

font

Contoh Zdog.Font yang digunakan untuk teks ini.

value

Nilai teks sebagai string.

fontSize

Ukuran font, diukur dalam piksel.

textAlign

Penyelarasan teks horizontal, setara dengan properti CSS text-align . Ini bisa menjadi 'left' , 'center' atau 'right'

textBaseline

Penyelarasan teks vertikal, setara dengan properti textBaseline Canvas HTML5. Ini bisa menjadi 'top' , 'middle' atau 'bottom'

Zdog.textgroup

Kelas ini sangat mirip dengan Zdog.Text , kecuali itu bertindak sebagai Zdog.Group sebagai gantinya, dan setiap teks mesin terbang diterjemahkan sebagai bentuknya sendiri. Ini bermanfaat untuk kasus penggunaan yang lebih canggih di mana Anda membutuhkan kontrol atas setiap karakter. 

 new Zdog . TextGroup ( {
  addTo : illo ,
  font : font ,
  value : 'Hey, Zdog!' ,
  textAlign : 'center' ,
  color : '#5222ee' ,
  stroke : 2 ,
} )

Opsi

Zdog.TextGroup mewarisi semua opsi dari kelas Zdog.Group , ditambah beberapa tambahan:

Param Detail Bawaan
font Zdog.Font untuk digunakan untuk teks ini. Ini diperlukan. null
value String teks ''
fontSize Ukuran teks, diukur dalam piksel 64
textAlign Penyelarasan teks horizontal, setara dengan properti CSS text-align . Ini bisa menjadi 'left' , 'center' atau 'right' 'left'
textBaseline Penyelarasan teks vertikal, setara dengan properti textBaseline Canvas HTML5. Ini bisa menjadi 'top' , 'middle' atau 'bottom' 'bottom'
color Warna teks #333
fill Isi teks false
stroke Stroke teks stroke

Properti

Zdog.TextGroup mewarisi semua properti dari kelas Zdog.Group , serta beberapa tambahan. Semua properti ini dapat diperbarui kapan saja dan teks yang diberikan akan diperbarui secara otomatis.

font

Contoh Zdog.Font yang digunakan untuk teks ini.

value

Nilai teks sebagai string.

fontSize

Ukuran font, diukur dalam piksel.

textAlign

Penyelarasan teks horizontal, setara dengan properti CSS text-align . Ini bisa menjadi 'left' , 'center' atau 'right'

textBaseline

Penyelarasan teks vertikal, setara dengan properti textBaseline Canvas HTML5. Ini bisa menjadi 'top' , 'middle' atau 'bottom'

color

Warna teks, setara dengan Shape.color . Color. Pengaturan ini akan memperbarui warna untuk semua anak kelompok.

fill

Isi teks, setara dengan Shape.fill . Pengaturan ini akan memperbarui isi untuk semua anak kelompok.

stroke

Teks stroke, setara dengan Shape.stroke . Menetapkan ini akan memperbarui stroke untuk semua anak kelompok.

Zdog.waitforfonts

Mengembalikan janji yang diselesaikan segera setelah semua font yang saat ini ditambahkan ke adegan dimuat dan siap digunakan. 

 Zdog . waitForFonts ( ) . then ( function ( ) {
  // Do something once the font is ready
}

Todo

  • Integrasi Google Fonts & Typekit?
  • Dukungan untuk arah teks yang berbeda, misalnya kanan-ke-kiri
  • Dukungan untuk font fallback
  • Dukungan untuk Font Warna (SVG)

Bangunan

Instal dependensi dengan NPM 

$ npm install

Jalankan DevServer 

$ npm start

Bangun file produksi 

$ npm run build

2019 James Daniel

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua