capsize
@capsizecss
CapSize membuat ukuran dan tata letak teks dapat diprediksi seperti setiap elemen lain di layar.
Menggunakan font metadata, teks sekarang dapat diukur sesuai dengan ketinggian huruf kapitalnya sambil memangkas ruang di atas huruf kapital dan di bawah garis dasar.
npm install @capsizecss/corefont-face tambahancreateStyleObjectMengembalikan objek gaya CSS-in-JS.
createStyleObject melewati opsi yang relevan. import { createStyleObject } from '@capsizecss/core' ;
const capsizeStyles = createStyleObject ( {
fontSize : 16 ,
leading : 24 ,
fontMetrics : {
capHeight : 700 ,
ascent : 1058 ,
descent : - 291 ,
lineGap : 0 ,
unitsPerEm : 1000 ,
} ,
} ) ;CATATAN: Disarankan agar Anda menginstal paket @capsizecss/metrik dan mengimpor metrik dari sana:
import { createStyleObject } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizeStyles = createStyleObject ( {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;Lihat opsi FontMetrics yang didokumentasikan di bawah ini untuk lebih banyak cara untuk mendapatkan metrik ini.
css . < div
css = { {
// fontFamily: '...' etc,
... capsizeStyles ,
} }
>
My capsized text ?
< / div>
️ Catatan: Tidak disarankan untuk menerapkan gaya terkait tata letak lebih lanjut ke elemen yang sama, karena ini akan berisiko mengganggu gaya yang digunakan untuk trim. Alih -alih pertimbangkan untuk menggunakan elemen bersarang.
createStyleString Mengembalikan string CSS yang dapat dimasukkan ke dalam tag style atau ditambahkan ke stylesheet.
createStyleString melewati opsi yang relevan. import { createStyleString } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizedStyleRule = createStyleString ( 'capsizedText' , {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;style dan terapkan nama kelas yang ditentukan. document . write ( `
<style type="text/css">
${ capsizedStyleRule }
</style>
<div class="capsizedText">
My capsized text ?
</div>
` ) ;
️ Catatan: Tidak disarankan untuk menerapkan gaya terkait tata letak lebih lanjut ke elemen yang sama, karena ini akan berisiko mengganggu gaya yang digunakan untuk trim. Alih -alih pertimbangkan untuk menggunakan elemen bersarang.
Capsize mendukung dua metode untuk mendefinisikan ukuran teks, capHeight dan fontSize .
Catatan: Anda seharusnya hanya melewati satu atau yang lain, bukan keduanya.
capHeight: <number>Menetapkan ketinggian huruf kapital ke nilai yang ditentukan. Mendefinisikan tipografi dengan cara ini membuat sejajar dengan kisi -kisi atau dengan elemen lain, misalnya ikon, angin sepoi -sepoi.
fontSize: <number> Mengatur ukuran font memungkinkan Anda mendapatkan semua manfaat pemangkasan ruang putih, sambil tetap menentukan font-size eksplisit untuk teks Anda. Ini bisa berguna saat dibutuhkan untuk mencocokkan spesifikasi desain beton atau pemasangan ke produk yang ada.
CapSize mendukung dua model mental untuk menentukan ketinggian garis, lineGap , dan leading . Jika Anda tidak meneruskan teks tidak akan mengikuti jarak default dari font yang ditentukan, misalnya line-height: normal .
Catatan: Anda seharusnya hanya melewati satu atau yang lain, bukan keduanya.
lineGap: <number>Menetapkan jumlah piksel antara garis, yang diukur antara garis dasar dan topi dari baris berikutnya.
leading: <number>Mengatur tinggi garis ke nilai yang disediakan yang diukur dari garis dasar teks. Ini menyelaraskan web dengan bagaimana tipografi diperlakukan dalam alat desain.
Metadata ini diekstraksi dari tabel metrik di dalam font itu sendiri. Ada sejumlah cara untuk menemukan informasi ini:
Jika menggunakan font google atau font sistem, instal paket @capsizecss/metrik dan impor metrik dengan nama. Misalnya:
import arialMetrics from '@capsizecss/metrics/arial' ;Jika menggunakan font dari file, instal paket @capsizecss/buka pack dan ekstrak metrik dari file font secara langsung. Misalnya:
import { fromFile } from '@capsizecss/unpack' ;
const metrics = await fromFile ( filePath ) ; Atau, gunakan situs web CapSize untuk menemukannya dengan memilih font dan referensi tab Metrics pada Langkah 3.
Paket inti juga menyediakan beberapa fitur berbasis metrik lainnya untuk meningkatkan tipografi di web:
Membuat deklarasi @font-face berbasis metrik untuk meningkatkan penyelarasan font fallback font, yang secara dramatis dapat meningkatkan metrik pergeseran tata letak kumulatif untuk situs yang bergantung pada font web.
Pertimbangkan contoh berikut, di mana font web yang diinginkan adalah lobster, jatuh kembali ke Helvetica Neue dan kemudian Arial , misalnya font-family: Lobster, 'Helvetica Neue', Arial .
createFontStack dari Paket Inti: import { createFontStack } from '@capsizecss/core' ; import lobster from '@capsizecss/metrics/lobster' ;
import helveticaNeue from '@capsizecss/metrics/helveticaNeue' ;
import arial from '@capsizecss/metrics/arial' ;font-family . const { fontFamily , fontFaces } = createFontStack ( [
lobster ,
helveticaNeue ,
arial ,
] ) ; Nilai yang dikembalikan berisi deklarasi wajah font yang dihasilkan serta fontFamily yang dihitung dengan alias font yang dipesan dengan tepat.
Nilai yang dikembalikan dapat di -templated menjadi stylesheet atau blok style . Berikut adalah contoh templat setang:
< style type =" text/css " >
.heading {
font-family: {{ fontFamily }}
}
{{ fontFaces }}
</ style >Ini akan menghasilkan CSS berikut:
. heading {
font-family : Lobster , 'Lobster Fallback: Helvetica Neue' ,
'Lobster Fallback: Arial' , 'Helvetica Neue' , Arial;
}
@font-face {
font-family : 'Lobster Fallback: Helvetica Neue' ;
src : local ( 'Helvetica Neue' );
ascent-override : 115.1741 % ;
descent-override : 28.7935 % ;
size-adjust : 86.8251 % ;
}
@font-face {
font-family : 'Lobster Fallback: Arial' ;
src : local ( 'Arial' );
ascent-override : 113.5679 % ;
descent-override : 28.392 % ;
size-adjust : 88.053 % ;
} Jika bekerja dengan perpustakaan CSS-in-JS, fontFaces yang dikembalikan dapat disediakan sebagai objek gaya JavaScript dengan memberikan styleObject sebagai opsi fontFaceFormat .
Berikut adalah contoh menggunakan emosi:
import { Global } from '@emotion/core' ;
const { fontFaces , fontFamily } = createFontStack (
[ lobster , helveticaNeue , arial ] ,
{
fontFaceFormat : 'styleObject' ,
} ,
) ;
export const App = ( ) => (
< >
< Global styles = { fontFaces } / >
< p css = { { fontFamily } } > ... < / p >
< / >
) ;Juga berguna sebagai sumber untuk manipulasi lebih lanjut mengingat itu adalah struktur data yang dapat diulang atau diperluas.
font-face tambahan tambahan Properti tambahan dapat ditambahkan ke deklarasi @font-face yang dihasilkan melalui opsi fontFaceProperties :
const { fontFamily , fontFaces } = createFontStack (
[ lobster , helveticaNeue , arial ] ,
{
fontFaceProperties : {
fontDisplay : 'swap' ,
} ,
} ,
) ;Ini akan menghasilkan penambahan berikut untuk deklarasi:
@font-face {
font-family: 'Lobster Fallback: Helvetica Neue';
src: local('Helvetica Neue');
ascent-override: 115.1741%;
descent-override: 28.7935%;
size-adjust: 86.8251%;
+ font-display: swap;
}
@font-face {
font-family: 'Lobster Fallback: Arial';
src: local('Arial');
ascent-override: 113.5679%;
descent-override: 28.392%;
size-adjust: 88.053%;
+ font-display: swap;
}Catatan
Melewati salah satu dari Metric Override CSS Properties akan diabaikan karena dihitung dengan capsize. Namun, properti size-adjust diterima untuk mendukung menyempurnakan override untuk kasus penggunaan tertentu. Ini dapat digunakan untuk memenuhi penyesuaian untuk teks tertentu, atau untuk menonaktifkan penyesuaian dengan mengaturnya menjadi 100% .
Untuk bahasa yang menggunakan himpunan bagian unicode yang berbeda, misalnya Thailand, fallback perlu ditingkatkan, karena penskalaan didasarkan pada frekuensi karakter dalam bahasa tertulis.
Tumpukan font fallback dapat dihasilkan untuk subset yang didukung dengan menentukan subset sebagai opsi:
const { fontFamily , fontFaces } = createFontStack ( [ lobster , arial ] , {
subset : 'thai' ,
} ) ; Tip
Butuh dukungan untuk subset unicode yang berbeda? Baik membuat masalah atau ikuti langkah-langkah yang diuraikan dalam skrip generate-weightings dan buka PR.
Mengembalikan semua informasi yang diperlukan untuk membuat gaya trim terkemuka untuk ukuran font tertentu yang diberikan metrik font yang disediakan. Ini berguna untuk integrasi dengan solusi gaya yang berbeda.
Menerima opsi yang sama seperti createstyleObject dan createstleString.
import { precomputeValues } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizeValues = precomputeValues ( {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;
// => {
// fontSize: string,
// lineHeight: string,
// capHeightTrim: string,
// baselineTrim: string,
//}Kembalikan tinggi tutup yang diberikan untuk ukuran font tertentu yang diberikan metrik font yang disediakan.
import { getCapHeight } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const actualCapHeight = getCapHeight ( {
fontSize : 24 ,
fontMetrics : arialMetrics ,
} ) ;
// => number Untuk membuat pengambilan metrik font mudah, CapSize menyediakan paket @capsizecss/metrics yang berisi semua data yang diperlukan untuk sistem dan font Google.
npm install @capsizecss/metricsLihat paket untuk dokumentasi.
Jika Anda menggunakan font khusus atau yang tidak termasuk dalam paket @capsizecss/metrics , CapSize menyediakan paket @capsizecss/unpack untuk mengekstrak data yang diperlukan baik melalui URL atau dari file lokal.
npm install @capsizecss/unpackLihat paket untuk dokumentasi.
Mit.
