15 เครื่องมือทำตัวพิมพ์เว็บที่เป็นประโยชน์, ไลบรารีและกรอบงาน
การจัดการกับการพิมพ์บนเว็บเป็นเรื่องแปลกจริง. แต่ละเบราว์เซอร์มีอัลกอริทึมของตัวเองเพื่อแสดงแบบอักษร ซึ่งอาจนำไปสู่ความคลาดเคลื่อนที่ไม่คาดคิด มีคุณสมบัติ CSS เพียงไม่กี่อย่างที่คุณสามารถใช้เพื่อควบคุมแบบอักษรบางอย่างเช่นการจัดช่องไฟแบบอักษรการปรับแบบอักษรให้เรียบในการสร้าง DropCaps เป็นต้นนอกจากนั้นเราต้องจัดการกับปัญหาการจัดวางจำนวนมากเมื่อเป็นแบบอักษร.
ข่าวดีก็คือมีแหล่งข้อมูลที่คุณสามารถใช้เพื่อควบคุมวงล้อเมื่อมันมาถึงการพิมพ์เว็บไซต์ นี่ เครื่องมือเว็บ 15 ไลบรารีและกรอบงาน คุณสามารถใช้จนจบ.
เพิ่มเติมเกี่ยวกับ Hongkiat:
- 9 ปลั๊กอินของ WordPress ทำอะไรได้มากกว่าด้วยแบบอักษรของคุณ
- 20 ปลั๊กอิน WordPress วิชาการพิมพ์ที่ดีที่สุดเพื่อเพิ่มความสามารถในการอ่าน
- ไอคอน UI ที่ดีขึ้นและคมชัดขึ้นด้วยแบบอักษรบนเว็บ
TypeRendering
โดยสังเขป, TypeRendering ทำงานคล้ายกับ Modernizr ยกเว้นว่าจะระบุเพียงเครื่องมือเบราว์เซอร์สำหรับการแสดงผลแบบอักษร ไลบรารีนี้เพิ่มคลาสแบบกำหนดเองตามการค้นพบซึ่งสามารถใช้เพื่อใช้กฎการกำหนดสไตล์เฉพาะสำหรับการแสดงผลชนิด.
KerningJS
การจัดช่องไฟยังไม่สามารถปรับแต่งให้ใช้กับเว็บได้ - ตัวอักษรการจัดช่องไฟ การสนับสนุนยังคงแย่ในขณะนี้ - แต่ทรัพย์สินมาตรฐานใหม่กำลังจะมาถึง. KerningJS เป็นไลบรารี Javascript ที่ให้คุณสมบัติใหม่บางประการสำหรับการควบคุมการจัดช่องไฟที่ดีขึ้นตัวอย่างเช่น -ตัวอักษร kern.
#heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0 0;
โปรดทราบว่าตัวอย่างข้างต้นไม่ได้มาตรฐานและใช้ได้เฉพาะกับ KerningJS เท่านั้น.
DropcapJS
แม้ว่าการสร้าง dropcap นั้นสามารถทำได้กับมาตรฐาน CSS ปัจจุบัน แต่ผลลัพธ์ยังไม่สมบูรณ์แบบ บางครั้งมันไม่เป็นที่พึงปรารถนาอย่างจริงจัง DropcapJS พัฒนาโดย Adobe Web Platform ได้รับความไว้วางใจในภารกิจเพื่อให้นักออกแบบเว็บไซต์สามารถใช้งาน dropcap ได้อย่างง่ายดาย.
LiningJS
LiningJS เป็นห้องสมุด JavaScript ซึ่งเพิ่ม เส้น ชั้นเรียนในแต่ละบรรทัดของย่อหน้าของคุณ วิธีนี้ช่วยให้คุณสามารถจัดรูปแบบเส้นแยกจากกัน มันจำลองแนวคิดของ :: ที่ n เส้น (), :: ที่ n สุดท้ายเส้น () และ :: สุดท้ายบรรทัด pseudo-classes ที่ยังไม่มีอยู่ใน CSS นี่คือตัวอย่างวิธีที่เราจัดสไตล์บรรทัดแรกของย่อหน้าด้วย LiningJS:
p .line [แรก] font-weight: 600; การแปลงข้อความ: ตัวพิมพ์ใหญ่;
นอกจากนี้ LiningJS ยังสนับสนุนการไหลของย่อหน้าภาษาจีน.
UnderlineJS
UnderlineJS เป็นไลบรารี JavaScript ที่ทำให้ข้อความขีดเส้นใต้ดีขึ้น ลองดูตัวอย่างเพื่อดูว่าฉันหมายถึงอะไรจงแน่ใจว่าได้วางเมาส์เหนือเส้น เปรียบเทียบการสาธิตกับผลลัพธ์ขีดเส้นใต้ของ CSS ปัจจุบัน ตกแต่งข้อความ มาตรฐานและคุณอาจเป็นแฟนของขีดเส้นใต้ JS ด้วย.
FlowType
ปลั๊กอินนี้จะปรับขนาดตัวอักษรแบบไดนามิกตามความกว้างของเสื้อคลุมเฉพาะ. FlowType ช่วยให้คุณใช้จำนวนอักขระที่เหมาะสมที่สุดต่อบรรทัดที่ความกว้างหน้าจอใด ๆ ไลบรารีมาพร้อมกับตัวเลือกที่สามารถกำหนดความกว้างของหน้าจอขั้นต่ำ / สูงสุดขนาดแบบอักษรขั้นต่ำ / สูงสุดและอัตราส่วนแบบอักษร.
HatchShow
HatchShow ขยายขนาดของแบบอักษรเพื่อเติมเต็มความกว้างทั้งหมดของคอนเทนเนอร์ ปลั๊กอินทำงานนอกกรอบด้วยอัลกอริทึม; โดยสรุปแล้วมันจะวัดความกว้างของคอนเทนเนอร์และความยาวของอักขระแบบอักษรและผนวกขนาดที่เหมาะสมของแบบอักษร.
GridLover
GridLover เป็นเครื่องมือที่ยอดเยี่ยมในการสร้างสไตล์พื้นฐานสำหรับการจัดเรียงตัวอักษร (ขนาดความสูงของบรรทัดและระยะขอบ) ด้วย UI ตัวเลื่อนที่ใช้งานง่าย มันสร้างสไตล์ใน SCSS, LESS และ Stylus เพื่อให้คุณสามารถรวมไว้ในโครงการของคุณได้ทันทีไม่ว่าคุณจะใช้ CSS-Preprocessor ใด.
TypeScale
TypeScale เป็นเครื่องมือออนไลน์ที่จะช่วยให้คุณกำหนดขนาดตัวอักษรที่เหมาะสมสำหรับเว็บไซต์ของคุณได้อย่างง่ายดาย เครื่องมือนี้มี GUI ที่ใช้งานง่ายเพื่อแทรกขนาดตัวอักษรพื้นฐานขนาดและตระกูลตัวอักษรที่คุณต้องการใช้ ผลลัพธ์จะปรากฏให้คุณเห็นเพื่อให้คุณสามารถเล่นกับเครื่องชั่งเพื่อให้ได้ค่าที่เหมาะสม เพิ่งคว้า CSS เมื่อคุณทำเสร็จแล้ว.
เครื่องชั่งแบบแยกส่วน
เครื่องชั่งแบบแยกส่วน เป็นเครื่องมือในการสร้างการปรับขนาดตัวอักษรที่เหมาะสมที่สุดสำหรับร่างกายและข้อความส่วนหัว มันส่งออกใน Sass ซึ่งควรใช้ร่วมกับห้องสมุด Sass ของมัน คุณอาจใช้ JavaScript .
font-To-กว้าง
ความกว้างแบบอักษร (FTW) เป็นไลบรารี Javascript ที่ทำให้แบบอักษรเหมาะสมกับความกว้างของคอนเทนเนอร์ มันจะกำหนดขนาดตัวอักษรพร้อมกับการเว้นวรรคคำที่จำเป็นสำหรับตัวอักษร หากคุณต้องการพาดหัวสวยนี่เป็นห้องสมุดที่คุณอาจต้องการลอง.
FFFFallback
FFFFallback, เครื่องมือที่มีประโยชน์ที่ช่วยให้คุณค้นหาแบบอักษรกองซ้อนที่ดีที่สุดที่จะลดลงอย่างสวยงาม เครื่องมือมาในรูปแบบของ bookmarklet ซึ่งจะวิเคราะห์ตระกูลฟอนต์บนหน้าของคุณและแนะนำชุดฟอนต์ที่ใช้เป็นทางเลือก.
จับคู่แบบอักษร
Google Font เป็นหนึ่งในห้องสมุดแบบอักษรบนเว็บที่ได้รับความนิยมสูงสุดที่มีการใช้งานหลายล้านรายการและโฮสต์แบบอักษรมากกว่า 500 ตระกูล. จับคู่แบบอักษร คือชุดของ Google Fonts ที่จับคู่กันซึ่งคุณสามารถค้นหาชุดค่าผสมที่หลากหลายระหว่างตระกูลแบบอักษรและรูปแบบใบหน้าได้อย่างง่ายดาย การจับคู่แบบอักษรทำให้การเลือกแบบอักษรเป็นเรื่องเล็กน้อยที่ครอบงำน้อยลง.
TypeSettings
TypeSettings เป็นชุดของชุดกฎ CSS เพื่อกำหนดขนาดตัวอักษรที่เหมาะสมจังหวะในแนวตั้งและอัตราส่วนการตอบสนองของการพิมพ์ การตั้งค่า TypeSettings มาใน Sass และ Stylus ซึ่งช่วยให้ความยืดหยุ่นในการตอบสนองความต้องการโครงการของคุณโดยการปรับตัวแปร.
Typeplate
Typeplate อาจเป็นหนึ่งในชุดเริ่มต้นที่สมบูรณ์ที่สุดสำหรับการตั้งค่าการพิมพ์ Typeplate มาพร้อมกับรูปแบบการพิมพ์พื้นฐานจำนวนหนึ่งที่ปรับขนาด, สี, เงินทุนขนาดเล็ก, dropcap, การเยื้อง, การใส่ยติภังค์, การใส่เครื่องหมายคำพูด, blockquote, code block และอื่น ๆ อีกมากมาย.
ตอนนี้อ่านแล้ว: ตัวอย่างการออกแบบเว็บที่มีตัวอักษรสวยงาม
