โฮมเพจ » Toolkit » 15 เครื่องมือทำตัวพิมพ์เว็บที่เป็นประโยชน์, ไลบรารีและกรอบงาน

    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 และอื่น ๆ อีกมากมาย.

    ตอนนี้อ่านแล้ว: ตัวอย่างการออกแบบเว็บที่มีตัวอักษรสวยงาม