หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ดาวน์โหลดแบบอักษร
ดาวน์โหลด

องค์ประกอบของ Fontface

ห้องสมุดเพื่อสร้างแบบอักษรในรูปแบบ TTF, EOT, WOFF และ WOFF2 พร้อมด้วยคำแนะนำ @font-face ในรูปแบบองค์ประกอบสไตล์ แรงบันดาลใจจาก Fontface-Loader

ห้องสมุดนี้มีจุดมุ่งหมายเพื่อลดความซับซ้อนของการใช้ FontFace Automation สำหรับโครงการ styled-components เนื่องจากเครื่องมือส่วนใหญ่สร้าง SCSS หรือเอาต์พุต CSS นอกจากนี้ยังมีตัวเลือกการกำหนดค่าพื้นฐานสำหรับไดเรกทอรีอินพุตและเอาต์พุตซึ่งสคริปต์อื่น ๆ ลืมให้

ฟังก์ styled-components CreateGlobalstyle ผู้ช่วยสไตล์ใช้เพื่อให้คุณสามารถนำเข้าแบบอักษรใน DOM ของคุณที่คุณต้องการ มีการเพิ่มเสาเพื่อให้คุณควบคุมคุณสมบัติ Font-Display CSS ของ @font-face เพื่อให้คุณสามารถปรับลำดับการโหลดของแบบอักษรของคุณให้เหมาะสม (อย่างน้อยในบริบท SSR)

เพื่อความสะดวกที่เพิ่มขึ้นไลบรารีนี้ยังสามารถสร้างไฟล์ CSS แต่ละไฟล์ที่โหลด @font-face เดียวรวมถึงไฟล์ SCSS ที่โหลด @font-face เดียวและคุณสมบัติ Font-Display CSS สามารถควบคุมได้ผ่านทาง @use with at-Rule

การติดตั้ง

NPM 

 npm install --save-dev fontface-styled-components

เส้นด้าย 

 yarn add -D fontface-styled-components

การพึ่งพาตัวเลือก

  • ฟอร์ฟฟอร์จ

รองรับรูปแบบการป้อนข้อมูล

Truetype

รองรับโดยค่าเริ่มต้น

opentype

คุณต้องติดตั้ง Fontforge และมี fontforge Binary ใน $PATH ของคุณ หากติดตั้งสคริปต์การแปลงจะแปลงฟอนต์ Opentype เป็น Truetype เป็นส่วนหนึ่งของกระบวนการสร้าง

การใช้งาน:

ในการสร้างไฟล์แบบอักษรและ CSS-in-JS ของคุณให้ใช้และปรับรหัสต่อไปนี้: 

 import fontface from 'fontface-styled-components' ;

fontface . run ( {
  sourceDir : 'assets/fonts' ,
  fontOutputDir : 'dist/fonts' ,
  fontsPublicDir : 'https://my.cdn.com/my-project/public/fonts' ,
  styledOutputDir : 'dist/src/assets/fontfaces/' ,
  forceRefresh : process . env . NODE_ENV === 'production' ,
} )

ในการโหลดตัวอักษรใน DOM ของหนึ่งในหน้าของคุณใช้และปรับรหัสต่อไปนี้: 

 import CatamaranBoldFontFace from 'src/assets/fontfaces/CatamaranBoldFontFace.style'
import CatamaranRegularFontFace from 'src/assets/fontfaces/CatamaranBoldFontFace.style'

< MyPageRoot >
  < CatamaranBoldFontFace />
  < CatamaranFontFace fontDisplay = "fallback" />
  < MyContent />
</ MyPageRoot >

เอาต์พุตทั่วไป:

การนำเข้าไฟล์ Catamaran-bold.ttf โดยทั่วไปจะส่งผลให้ไฟล์ CSS-in-Js ต่อไปนี้ถูกสร้างขึ้น: 

 import { createGlobalStyle } from 'styled-components'

export const CatamaranBoldFontFace = createGlobalStyle `
  @font-face {
    font-display: ${ props => props . fontDisplay || 'auto' } ;
    font-family: 'Catamaran';
    font-weight: 700;
    font-style: normal;
    src: local('Catamaran'),
        url('/public/fonts/Catamaran-Bold.eot?#iefix') format('embedded-opentype'),
        url('/public/fonts/Catamaran-Bold.woff2') format('woff2'),
        url('/public/fonts/Catamaran-Bold.ttf')  format('truetype'),
        url('/public/fonts/Catamaran-Bold.woff') format('woff');
  }
`

export default { CatamaranBoldFontFace }

ตัวเลือก:

sourcedir:

เส้นทางไปยังโฟลเดอร์ที่มีแบบอักษร TTF ต้นทาง

ค่าเริ่มต้น : 'assets/fonts/'

FontOutputDir:

เส้นทางไปยังโฟลเดอร์ปลายทางสำหรับตัวอักษรที่ถูกแปลงที่จะวางไว้ตัวอักษร TTF ดั้งเดิมจะถูกคัดลอกในโฟลเดอร์นี้

ค่าเริ่มต้น : 'dist/fonts/'

FontSpublicDir:

เส้นทางของแบบอักษรในเซิร์ฟเวอร์การผลิตของคุณซึ่งจะใช้ใน URL ประกาศ @font-face ของคุณ

ค่าเริ่มต้น : '/public/fonts/'

WithStyledComponents:

ไม่ว่าจะสร้างไฟล์ @fontface สำหรับองค์ประกอบสไตล์

ค่าเริ่มต้น : true

StyleDOutputDir:

พา ธ ไปยังโฟลเดอร์ปลายทางที่จะเขียนไฟล์ CSS-in-JS ไปยัง ไฟล์ตัวอักษรต้นฉบับแต่ละไฟล์จะมีไฟล์ CSS-in-JS ของตัวเอง

ค่าเริ่มต้น : 'dist/src/fontfaces/'

withcss:

ไม่ว่าจะสร้างไฟล์วานิลลา CSS @fontface

ค่าเริ่มต้น : false

CSSOutputDir:

เส้นทางไปยังโฟลเดอร์ปลายทางที่จะเขียนไฟล์ประกาศ CSS @fontface ไปที่ ไฟล์ตัวอักษรต้นฉบับแต่ละไฟล์จะมีไฟล์ CSS ของตัวเอง

ค่าเริ่มต้น : 'dist/src/fontfaces/'

กับ SSCSS:

ไม่ว่าจะสร้างไฟล์ SCSS Mixin สำหรับตัวอักษรแต่ละตัวหรือไม่

ค่าเริ่มต้น : false

SCSSOutputDir:

เส้นทางไปยังโฟลเดอร์ปลายทางที่จะเขียน SCSS mixins ไป ไฟล์ตัวอักษรต้นฉบับแต่ละไฟล์จะมีไฟล์ SCSS ของตัวเอง

ค่าเริ่มต้น : 'dist/src/fontfaces/'

Withlocal:

ธงเพื่อเพิ่มแหล่งข้อมูลท้องถิ่นในการประกาศ @fontface แนะนำเฉพาะเมื่อโครงการของคุณจะถูกนำไปใช้กับสภาพแวดล้อม B2B หรืออุปกรณ์ขายจุดที่คุณสามารถมั่นใจได้ว่าตัวอักษรในท้องถิ่นนั้นเหมือนกับที่คุณตั้งใจจะให้บริการเนื่องจากพวกเขามักจะแตกต่างกันไปตามอุปกรณ์ผู้บริโภค

ค่าเริ่มต้น : true สำหรับความเข้ากันได้ย้อนหลัง แต่เราขอแนะนำให้คุณตั้งค่าเป็น false

Fontdisplay:

หากตั้งค่าให้ใช้คุณสมบัติฟอนต์-เพลย์กับไฟล์ @fontface ทั้งหมด โดยไม่เลือกปฏิบัติ สิ่งนี้มีจุดประสงค์หลักหากคุณต้องการตั้งค่ารูปแบบที่คุณจะแทนที่ด้วยตรรกะของการสร้างตรรกะของคุณเองหรือหากคุณต้องการตั้งค่าเริ่มต้นและแก้ไขไฟล์ @fontface เฉพาะด้วยตนเอง

หาก UNSET 'auto' จะถูกใช้โดยค่าเริ่มต้นสำหรับไฟล์ CSS สำหรับไฟล์ css-in-js พารามิเตอร์ตัวอักษรเทมเพลตจะถูกฉีดขึ้นมาก่อนที่จะอ่าน props.fontDisplay ก่อนและจะส่งกลับ 'auto' ถ้าเสานั้นไม่ได้ตั้งค่า

ค่าเริ่มต้น : null

อนุญาต:

ธงเพื่ออนุญาตไดเรกทอรีอินพุตที่ว่างเปล่า มีประโยชน์สำหรับเมื่อคุณใช้ fontface-styled-components ในสภาพแวดล้อมการเขียนโปรแกรม หาก false ข้อผิดพลาดจะถูกโยนเมื่อไม่พบตัวอักษรในไดเรกทอรีอินพุต

ค่าเริ่มต้น : false

forcerefresh:

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

ค่าเริ่มต้น : false

เงียบ:

ธงเพื่อป้องกันข้อมูลและคำเตือน

ค่าเริ่มต้น : false

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด