พรีวิว Typography
ปรับ font-size, line-height & letter-spacing ได้โดยตรง
คัดลอก CSS ได้ในคลิกเดียว
↑ คลิกที่ข้อความด้านบนเพื่อแก้ไขโดยตรง
เกี่ยวกับเครื่องมือ
เครื่องมือพรีวิว Typography ช่วยให้คุณปรับ font-size, line-height, letter-spacing และ font-weight ด้วยสไลเดอร์ และดูผลลัพธ์ได้ทันทีในพื้นที่พรีวิวแบบเรียลไทม์
รองรับ Google Fonts รวมถึงฟอนต์ภาษาญี่ปุ่น เมื่อคุณได้การตั้งค่าที่พอใจแล้ว สามารถคัดลอกผลลัพธ์ CSS ได้ในคลิกเดียว มีเพียงการโหลด Google Fonts เท่านั้นที่มีการส่งคำขอออกไปยังเครือข่ายภายนอก — เนื้อหาข้อความและการตั้งค่าของคุณจะไม่ถูกส่งออกไป
วิธีใช้งาน
ปรับสไลเดอร์
เลื่อนสไลเดอร์ font-size, line-height, letter-spacing และ font-weight หรือเริ่มต้นจากพรีเซ็ตสำหรับกรณีการใช้งานทั่วไป
ตรวจสอบพรีวิว
ดูการเปลี่ยนแปลงได้ทันทีในพื้นที่พรีวิว คลิกที่ข้อความเพื่อแก้ไขเป็นเนื้อหาของคุณเอง
คัดลอก CSS
คลิกที่ "คัดลอก CSS" เพื่อคัดลอกโค้ดที่สร้างขึ้นไปยังคลิปบอร์ด แล้วนำไปวางในสไตล์ชีต (stylesheet) ของคุณ
อภิธานศัพท์
- font-size
- กำหนดขนาดของฟอนต์ สามารถระบุเป็น px, em, rem, % เป็นต้น ค่าเริ่มต้นของเบราว์เซอร์คือ 16px
- line-height
- กำหนดความสูงของบรรทัด แนะนำให้ใช้ค่าที่ไม่มีหน่วย (เช่น 1.75) สำหรับข้อความทั่วไป ค่าที่นิยมใช้คือ 1.5–1.8
- letter-spacing
- กำหนดระยะห่างระหว่างตัวอักษร แนะนำให้ใช้หน่วย em เพื่อให้การออกแบบสามารถย่อขยายได้ดี
- font-weight
- กำหนดความหนาของฟอนต์ ค่าอยู่ระหว่าง 100 (บางมาก) ถึง 900 (หนามาก)
- font-family
- ระบุรูปแบบฟอนต์ สามารถแสดงรายการฟอนต์สำรองหลายแบบโดยคั่นด้วยเครื่องหมายจุลภาค
- Typography
- ศิลปะการจัดตัวอักษรเพื่อให้ภาษาเขียนอ่านง่าย สบายตา และมีความสวยงาม
- Google Fonts
- บริการเว็บฟอนต์ฟรีจาก Google ฟอนต์จะถูกโหลดผ่านแท็กลิงก์ CSS หรือ JavaScript และเรียกใช้ผ่าน font-family
- Web Font
- ฟอนต์ที่โหลดจากเซิร์ฟเวอร์โดยใช้ @font-face เว็บฟอนต์ช่วยให้การแสดงผลมีความสม่ำเสมอในทุกอุปกรณ์
คำถามที่พบบ่อย
- Q.ข้อความของฉันจะถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?
- ไม่ ข้อความพรีวิวและการตั้งค่าทั้งหมดจะถูกประมวลผลบนเบราว์เซอร์ของคุณเท่านั้น
- Q.ทำไมการโหลด Google Fonts ถึงมีคำขอไปยังเครือข่ายภายนอก?
- มีเพียงไฟล์ฟอนต์เท่านั้นที่ถูกดาวน์โหลดจากเซิร์ฟเวอร์ Google เนื้อหาข้อความและการตั้งค่าของคุณจะไม่ถูกส่งออกไป
- Q.ฉันสามารถใช้ฟอนต์ที่ไม่มีในรายการได้หรือไม่?
- คุณสามารถโหลด Google Font ใดก็ได้โดยเพิ่มชื่อลงในฟิลด์ font-family ในสไตล์ชีตของคุณ รายการที่มีในเครื่องมือนี้เป็นตัวเลือกที่ได้รับความนิยมมากที่สุด
- Q.เครื่องมือนี้ใช้งานบนมือถือได้หรือไม่?
- ได้ สไลเดอร์รองรับการสัมผัส
- Q.ฉันสามารถกรอกค่าตัวเลขโดยตรงแทนการใช้สไลเดอร์ได้หรือไม่?
- ยังไม่รองรับโดยตรง กรุณาใช้พรีเซ็ตสำหรับค่าที่ใช้บ่อย จากนั้นจึงปรับละเอียดเพิ่มเติมด้วยสไลเดอร์
กรณีการใช้งาน
การออกแบบ Web Typography
ค้นหาการผสมผสานที่สมบูรณ์แบบระหว่างขนาดตัวอักษรและความสูงบรรทัดสำหรับหัวข้อ ข้อความทั่วไป และคำบรรยาย ด้วยภาพที่เห็นได้ชัดเจน
เพิ่มความง่ายในการอ่านบล็อก
ปรับความสูงบรรทัดและระยะห่างตัวอักษรให้สมบูรณ์แบบสำหรับบทความที่มีขนาดยาว
ตรวจสอบฟอนต์สำหรับงานนำเสนอ
ตรวจสอบขนาดตัวอักษรและความหนาก่อนจะสรุปการทำพรีเซนเทชัน
เรียนรู้ CSS
ทำความเข้าใจการทำงานของคุณสมบัติ CSS แต่ละตัวผ่านการทดลองแบบเห็นภาพ
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง