ดาวน์โหลด capsize - capsize ซอร์สโค้ดดาวน์โหลด

capsize

ซอร์สโค้ดอื่น ๆ

@capsizecss

ดาวน์โหลด

Capsize ทำให้ขนาดและเลย์เอาต์ของข้อความคาดการณ์ได้เหมือนกับองค์ประกอบอื่น ๆ บนหน้าจอ
การใช้เมตาดาต้าแบบอักษรตอนนี้ข้อความสามารถปรับขนาดได้ตามความสูงของตัวอักษรตัวใหญ่ในขณะที่ตัดแต่งพื้นที่เหนือตัวพิมพ์ใหญ่และต่ำกว่าพื้นฐาน

npm install @capsizecss/core

การใช้งาน
- createStyleObject
- createstylestring
ตัวเลือก
- ขนาดข้อความ
- ความสูงของเส้น
- ตัวชี้วัดแบบอักษร
แกนกลาง
- CreateFontstack
  - การใช้งานในรูปแบบ CSS
  - การใช้งานด้วยเฟรมเวิร์ก CSS-in-JS
  - คุณสมบัติเพิ่มเติม font-face
- precomputevalues
- getCapheight
ตัวชี้วัด
แกะ
การรวมกัน
- วานิลลา-สกัด

การใช้งาน

`createStyleObject`

ส่งคืนวัตถุสไตล์ CSS-in-JS

นำเข้า createStyleObject ผ่านตัวเลือกที่เกี่ยวข้อง

 import { createStyleObject } from '@capsizecss/core' ;

const capsizeStyles = createStyleObject ( {
  fontSize : 16 ,
  leading : 24 ,
  fontMetrics : {
    capHeight : 700 ,
    ascent : 1058 ,
    descent : - 291 ,
    lineGap : 0 ,
    unitsPerEm : 1000 ,
  } ,
} ) ;

หมายเหตุ: ขอแนะนำให้คุณติดตั้งแพ็คเกจ @capsizecss/metrics และนำเข้าการวัดจากที่นั่น:

 import { createStyleObject } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;

const capsizeStyles = createStyleObject ( {
  fontSize : 16 ,
  leading : 24 ,
  fontMetrics : arialMetrics ,
} ) ;

ดูตัวเลือก FontMetrics ที่บันทึกไว้ด้านล่างสำหรับวิธีเพิ่มเติมในการรับตัวชี้วัดเหล่านี้

ใช้สไตล์กับองค์ประกอบข้อความเช่นผ่าน css Prop

 < div
  css = { {
    // fontFamily: '...' etc,
    ... capsizeStyles ,
  } }
>
  My capsized text ?
< / div>

หมายเหตุ: ไม่แนะนำให้ใช้รูปแบบที่เกี่ยวข้องกับเค้าโครงเพิ่มเติมกับองค์ประกอบเดียวกันเนื่องจากจะเสี่ยงต่อการรบกวนรูปแบบที่ใช้สำหรับการตัดแต่ง พิจารณาใช้องค์ประกอบที่ซ้อนกันแทน

`createStyleString`

ส่งคืนสตริง CSS ที่สามารถแทรกลงในแท็ก style หรือผนวกเข้ากับสไตล์ชีท

นำเข้า createStyleString ผ่านตัวเลือกที่เกี่ยวข้อง

 import { createStyleString } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;

const capsizedStyleRule = createStyleString ( 'capsizedText' , {
  fontSize : 16 ,
  leading : 24 ,
  fontMetrics : arialMetrics ,
} ) ;

เพิ่มสไตล์ลงในสไตล์ชีทหรือองค์ประกอบ style และใช้ชื่อคลาสที่ระบุ

 document . write ( `
  <style type="text/css">
    ${ capsizedStyleRule }
  </style>
  <div class="capsizedText">
    My capsized text ?
  </div>
` ) ;

หมายเหตุ: ไม่แนะนำให้ใช้รูปแบบที่เกี่ยวข้องกับเค้าโครงเพิ่มเติมกับองค์ประกอบเดียวกันเนื่องจากจะเสี่ยงต่อการรบกวนรูปแบบที่ใช้สำหรับการตัดแต่ง พิจารณาใช้องค์ประกอบที่ซ้อนกันแทน

ตัวเลือก

ขนาดข้อความ

Capsize รองรับสองวิธีในการกำหนดขนาดของข้อความ capHeight และ fontSize

หมายเหตุ: คุณควรผ่านไปอย่างใดอย่างหนึ่งไม่ใช่ทั้งสองอย่าง

`capHeight: <number>`

ตั้งค่าความสูงของตัวพิมพ์ใหญ่เป็นค่าที่กำหนด การกำหนดตัวอักษรด้วยวิธีนี้ทำให้สอดคล้องกับกริดหรือกับองค์ประกอบอื่น ๆ เช่นไอคอนสายลม

`fontSize: <number>`

การตั้งค่าขนาดตัวอักษรช่วยให้คุณได้รับประโยชน์ทั้งหมดของการตัดแต่งพื้นที่สีขาวในขณะที่ยังคงระบุ font-size ที่ชัดเจนสำหรับข้อความของคุณ สิ่งนี้จะมีประโยชน์เมื่อจำเป็นเพื่อให้ตรงกับข้อมูลจำเพาะการออกแบบคอนกรีตหรือเหมาะสมกับผลิตภัณฑ์ที่มีอยู่

ความสูงของเส้น

Capsize รองรับโมเดลทางจิตสองแบบสำหรับการระบุความสูงของสาย lineGap และ leading หากคุณไม่ผ่านข้อความใด ๆ จะเป็นไปตามระยะห่างเริ่มต้นของตัวอักษรที่ระบุเช่น line-height: normal

หมายเหตุ: คุณควรผ่านไปอย่างใดอย่างหนึ่งไม่ใช่ทั้งสองอย่าง

`lineGap: <number>`

ตั้งค่าจำนวนพิกเซลระหว่างเส้นซึ่งวัดระหว่างความสูงพื้นฐานและความสูงของหมวกของบรรทัดถัดไป

`leading: <number>`

ตั้งค่าความสูงของเส้นเป็นค่าที่ให้ไว้ซึ่งวัดจากพื้นฐานของข้อความ สิ่งนี้สอดคล้องกับเว็บกับวิธีการพิมพ์ตัวอักษรในเครื่องมือออกแบบ

ตัวชี้วัดแบบอักษร

ข้อมูลเมตานี้สกัดจากตารางตัวชี้วัดภายในตัวอักษรเอง มีหลายวิธีในการค้นหาข้อมูลนี้:

หากใช้ฟอนต์ Google หรือแบบอักษรของระบบให้ติดตั้งแพ็คเกจ @capsizecss/metrics และนำเข้าตัวชี้วัดตามชื่อ ตัวอย่างเช่น:
```
 import arialMetrics from '@capsizecss/metrics/arial' ;
```
หากใช้แบบอักษรจากไฟล์ให้ติดตั้งแพ็คเกจ @capsizeCss/unpack และแยกตัวชี้วัดออกจากไฟล์ตัวอักษรโดยตรง ตัวอย่างเช่น:
```
 import { fromFile } from '@capsizecss/unpack' ;

const metrics = await fromFile ( filePath ) ;
```
หรือใช้เว็บไซต์ Capsize เพื่อค้นหาสิ่งเหล่านี้โดยเลือกแท็บตัวอักษรและ Metrics อ้างอิงในขั้นตอนที่ 3

แกนกลาง

แพ็คเกจหลักยังมีคุณสมบัติที่อิงกับตัวชี้วัดอื่น ๆ สองสามอย่างสำหรับการปรับปรุงการพิมพ์บนเว็บ:

CreateFontstack

สร้างการประกาศ @font-face ที่ใช้ตัวชี้วัดเพื่อปรับปรุงการจัดตำแหน่งของ Font Family Fallbacks ซึ่งสามารถปรับปรุงตัวชี้วัดการเปลี่ยนเลย์เอาต์แบบสะสมสำหรับไซต์ที่ขึ้นอยู่กับตัวอักษรเว็บได้อย่างมาก

การใช้งาน

พิจารณาตัวอย่างต่อไปนี้ที่ตัวอักษรเว็บที่ต้องการคือกุ้งก้ามกรามตกกลับไปที่ Helvetica Neue จากนั้น Arial เช่น font-family: Lobster, 'Helvetica Neue', Arial

นำเข้า createFontStack จากแพ็คเกจหลัก:

 import { createFontStack } from '@capsizecss/core' ;

นำเข้าการวัดแบบอักษรสำหรับแบบอักษรที่ต้องการแต่ละตัว (ดูตัวชี้วัดตัวอักษรด้านบน):

 import lobster from '@capsizecss/metrics/lobster' ;
import helveticaNeue from '@capsizecss/metrics/helveticaNeue' ;
import arial from '@capsizecss/metrics/arial' ;

สร้างสแต็กแบบอักษรของคุณผ่านตัวชี้วัดเป็นอาร์เรย์โดยใช้คำสั่งซื้อเดียวกับที่คุณต้องการผ่านคุณสมบัติ CSS font-family

 const { fontFamily , fontFaces } = createFontStack ( [
  lobster ,
  helveticaNeue ,
  arial ,
] ) ;

ค่าที่ส่งคืนประกอบด้วยการประกาศตัวอักษรที่สร้างขึ้นเช่นเดียวกับ fontFamily ที่คำนวณได้ด้วยนามแฝงตัวอักษรที่ได้รับคำสั่งอย่างเหมาะสม

การใช้งานในรูปแบบ CSS หรือแท็กสไตล์

ค่าที่ส่งคืนสามารถเทมเพลตลงในสไตล์ชีทหรือบล็อก style นี่คือตัวอย่างเทมเพลต HandleBars:

 < style type =" text/css " >
  .heading {
    font-family: {{ fontFamily }}
  }

  {{ fontFaces }}
</ style >

สิ่งนี้จะสร้าง CSS ต่อไปนี้:

. 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 % ;
}

การใช้งานด้วยเฟรมเวิร์ก CSS-in-JS

หากทำงานกับไลบรารี CSS-in-JS fontFaces ที่ส่งคืนสามารถให้เป็นวัตถุสไตล์ JavaScript โดยการจัดหา styleObject เป็นตัวเลือก fontFaceFormat

นี่คือตัวอย่างการใช้อารมณ์:

 import { Global } from '@emotion/core' ;

const { fontFaces , fontFamily } = createFontStack (
  [ lobster , helveticaNeue , arial ] ,
  {
    fontFaceFormat : 'styleObject' ,
  } ,
) ;

export const App = ( ) => (
  < >
    < Global styles = { fontFaces } / >
    < p css = { { fontFamily } } > ... < / p >
  < / >
) ;

ยังมีประโยชน์ในฐานะแหล่งที่มาสำหรับการจัดการเพิ่มเติมเนื่องจากเป็นโครงสร้างข้อมูลที่สามารถวนซ้ำหรือขยายออกไป

ให้คุณสมบัติ `font-face` เพิ่มเติม

สามารถเพิ่มคุณสมบัติเพิ่มเติมในการประกาศ @font-face ที่สร้างขึ้นผ่านตัวเลือก fontFaceProperties :

 const { fontFamily , fontFaces } = createFontStack (
  [ lobster , helveticaNeue , arial ] ,
  {
    fontFaceProperties : {
      fontDisplay : 'swap' ,
    } ,
  } ,
) ;

ซึ่งจะส่งผลให้การประกาศเพิ่มเติมดังต่อไปนี้:

 @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;
 }

บันทึก

ผ่านคุณสมบัติ CSS ที่แทนที่การวัดใด ๆ จะถูกละเว้นเนื่องจากคำนวณโดยการลดลง อย่างไรก็ตามคุณสมบัติ size-adjust ได้รับการยอมรับเพื่อสนับสนุนการปรับแต่งการแทนที่สำหรับกรณีการใช้งานเฉพาะ สิ่งนี้สามารถใช้ในการปรับแต่งสำหรับข้อความเฉพาะหรือเพื่อปิดใช้งานการปรับโดยการตั้งค่าเป็น 100%

ปรับขนาดสำหรับชุดย่อยอักขระที่แตกต่างกัน

สำหรับภาษาที่ใช้ชุดย่อย Unicode ที่แตกต่างกันเช่นภาษาไทยต้องมีการปรับขนาดทางเลือกตามนั้นเนื่องจากการปรับขนาดจะขึ้นอยู่กับความถี่ของตัวละครในภาษาเขียน

สามารถสร้างสแต็กแบบฟอนต์ทางเลือกสำหรับชุดย่อยที่รองรับโดยระบุ subset เป็นตัวเลือก:

 const { fontFamily , fontFaces } = createFontStack ( [ lobster , arial ] , {
  subset : 'thai' ,
} ) ;

เคล็ดลับ

ต้องการการสนับสนุนสำหรับชุดย่อย Unicode ที่แตกต่างกันหรือไม่? ทั้งสร้างปัญหาหรือทำตามขั้นตอนที่ระบุไว้ในสคริปต์ generate-weightings และเปิดประชาสัมพันธ์

precomputevalues

ส่งคืนข้อมูลทั้งหมดที่จำเป็นในการสร้างรูปแบบการตัดแต่งชั้นนำสำหรับขนาดตัวอักษรที่เฉพาะเจาะจงที่ได้รับการวัดแบบอักษรที่ให้ไว้ สิ่งนี้มีประโยชน์สำหรับการรวมเข้ากับโซลูชั่นสไตล์ที่แตกต่างกัน

ยอมรับตัวเลือกเดียวกันกับ CreateStyleObject และ Createstylestring

 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,
//}

getCapheight

ส่งคืนความสูงของหมวกที่แสดงผลสำหรับขนาดตัวอักษรที่เฉพาะเจาะจงที่ได้รับการวัดตัวอักษรที่ให้ไว้

 import { getCapHeight } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;

const actualCapHeight = getCapHeight ( {
  fontSize : 24 ,
  fontMetrics : arialMetrics ,
} ) ;

// => number

ตัวชี้วัด

เพื่อให้การดึงตัวชี้วัดแบบอักษรได้ง่าย Capsize ให้แพคเกจ @capsizecss/metrics ที่มีข้อมูลที่จำเป็นทั้งหมดสำหรับทั้งระบบและ Google แบบอักษร

npm install @capsizecss/metrics

ดูแพ็คเกจสำหรับเอกสาร

แกะ

หากคุณใช้แบบอักษรที่กำหนดเองหรือไม่รวมอยู่ในแพ็คเกจ @capsizecss/metrics , Capsize ให้แพ็คเกจ @capsizecss/unpack เพื่อแยกข้อมูลที่ต้องการผ่าน URL หรือจากไฟล์ท้องถิ่น

npm install @capsizecss/unpack

ดูแพ็คเกจสำหรับเอกสาร

การรวมกัน

การรวมกันของวานิลลาผ่าน @capsizecss/วานิลลา-สกัด

ขอบคุณ

Vincent de Oliveira สำหรับการเขียน Deep Dive CSS: Metrics Font, ความสูงของเส้นและแนวตั้งซึ่งให้การวิจัยที่จำเป็นในการสร้างทั้งหมดนี้
Devon Govett สำหรับการสร้าง FontKit ซึ่งทำการยกตัวเป็นตัวอักษรแบบฟอนต์อย่างหนักทั้งหมดภายใต้ฝาครอบ
ขอให้เรามีพื้นที่สำหรับทำงานที่น่าสนใจ