home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> ซอฟต์แวร์ >> ซอฟต์แวร์

วิธีติดตั้งแบบอักษร Google Roboto บน Windows, Mac และ Linux

แบบอักษร Roboto เป็นแบบอักษร sans-serif ที่สร้างโดย Google ซึ่งดูทันสมัยและแสดงผลได้ดีบนหน้าจอความละเอียดสูง เช่น โทรศัพท์ Android จึงเหมาะสำหรับการใช้งานหลากหลาย สิ่งสำคัญคือ การติดตั้งแบบอักษร Roboto บน Windows, macOS และ Linux ทำได้ง่ายมาก

ในบทความนี้ เราจะแนะนำวิธีติดตั้งแบบอักษร Google Roboto บน Windows, macOS, Linux และแม้แต่บนเว็บไซต์ของคุณ เริ่มกันเลย!

ดาวน์โหลดแบบอักษร Google Roboto

ไม่ว่าคุณจะใช้แพลตฟอร์มใด ขั้นตอนแรกคือต้องดาวน์โหลดชุดแบบอักษร Roboto ไปที่เว็บไซต์แบบอักษร Roboto วิธีที่ง่ายที่สุดคือคลิกปุ่ม "Download Family" เพื่อดาวน์โหลดครอบครัวแบบอักษรทั้งหมด

ไฟล์จะเป็นไฟล์ ZIP บนคอมพิวเตอร์ของคุณ ซึ่งจากนั้นก็สามารถติดตั้งบนระบบปฏิบัติการ (OS) ได้

วิธีติดตั้งแบบอักษร Google Roboto บน Windows, Mac และ Linux

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

1. Windows 10

สำหรับ Windows ให้แตกไฟล์โฟลเดอร์แบบอักษร Roboto ก่อน จากนั้นเปิดเมนู Start และเข้าไปที่หน้า Settings

จากนั้นคลิกที่ Personalization แล้วเลือก Fonts

ต่อไป ลากแบบอักษรที่แตกไฟล์แล้วไปวางที่หน้าต่างติดตั้ง หลังจากไม่กี่วินาที แบบอักษร Google Roboto จะถูกติดตั้งใน Windows แล้ว คุณสามารถเลือกใช้ได้เหมือนแบบอักษรอื่นๆ จากแอปพลิเคชันที่ติดตั้งอยู่

2. macOS

สำหรับ Mac ให้แตกไฟล์ ZIP ก่อน แล้วเลือกไฟล์แบบอักษรทั้งหมดในโฟลเดอร์ (ยกเว้น LICENSE.txt) คลิกขวาแล้วเลือก "Open With → Font Book" จากเมนูบริบท

แบบอักษรจะถูกโหลดเข้า Font Book และพร้อมใช้งานในแอปพลิเคชันของคุณ

หมายเหตุ: คุณยังสามารถดับเบิลคลิกที่ไฟล์แบบอักษรแต่ละไฟล์เพื่อโหลดเข้า Font Book ได้อีกด้วย

3. Linux

เปิดโฟลเดอร์ home และเปิดใช้งานตัวเลือกแสดงไฟล์/โฟลเดอร์ที่ซ่อนอยู่ ค้นหาโฟลเดอร์ ".fonts" หากไม่มี ให้สร้างใหม่ จากนั้นย้ายโฟลเดอร์แบบอักษร Roboto ไปที่โฟลเดอร์ ".fonts" นี้

ทางเลือกอื่นคือใช้โปรแกรม Font Manager เพื่อจัดการแบบอักษร

  1. ติดตั้ง Font Manager จาก Software Center หรือ repository
  2. เมื่อติดตั้งเสร็จ ให้เปิด Font Manager และแอป Fonts (จาก Search Bar)
  3. ใน Font Manager ให้อยู่ที่แท็บ Manage และคลิกไอคอน Plus
  4. ไปที่โฟลเดอร์แบบอักษรที่แตกไฟล์แล้วและเพิ่มแบบอักษรตามต้องการ

เมื่อรีสตาร์ทแอปที่ใช้งานอยู่ คุณควรจะเห็นแบบอักษร Roboto ให้เลือกใช้งานแล้ว

การใช้แบบอักษร Google Roboto บนเว็บไซต์

หากต้องการใช้แบบอักษร Roboto บนเว็บไซต์ สามารถใช้ไวยากรณ์ CSS3 @font-face เพื่อฝังแบบอักษรภายนอกลงในเว็บเพจ

ไปที่หน้า FontSquirrel Roboto font คลิก "Webfont Kit" แล้วเลือกฟอร์แมตแบบอักษรที่ต้องการ Subset (ถ้ามี) และคลิก "Download @Font-Face Kit"

แตกไฟล์ ZIP ไปที่โฟลเดอร์แบบอักษรของเว็บไซต์ เปิดไฟล์สไตล์ชีทของเว็บและเพิ่มโค้ดต่อไปนี้:

@font-face { font-family: 'Roboto'; src: url('Roboto-Regular-webfont.eot'); src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-Regular-webfont.woff') format('woff'), url('Roboto-Regular-webfont.ttf') format('truetype'), url('Roboto-Regular-webfont.svg#RobotoRegular') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('Roboto-Italic-webfont.eot'); src: url('Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-Italic-webfont.woff') format('woff'), url('Roboto-Italic-webfont.ttf') format('truetype'), url('Roboto-Italic-webfont.svg#RobotoItalic') format('svg'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'Roboto'; src: url('Roboto-Bold-webfont.eot'); src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-Bold-webfont.woff') format('woff'), url('Roboto-Bold-webfont.ttf') format('truetype'), url('Roboto-Bold-webfont.svg#RobotoBold') format('svg'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('Roboto-BoldItalic-webfont.eot'); src: url('Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-BoldItalic-webfont.woff') format('woff'), url('Roboto-BoldItalic-webfont.ttf') format('truetype'), url('Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg'); font-weight: bold; font-style: italic; }
@font-face { font-family: 'Roboto'; src: url('Roboto-Thin-webfont.eot'); src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-Thin-webfont.woff') format('woff'), url('Roboto-Thin-webfont.ttf') format('truetype'), url('Roboto-Thin-webfont.svg#RobotoThin') format('svg'); font-weight: 200; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('Roboto-ThinItalic-webfont.eot'); src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-ThinItalic-webfont.woff') format('woff'), url('Roboto-ThinItalic-webfont.ttf') format('truetype'), url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); font-weight: 200; font-style: italic; }
@font-face { font-family: 'Roboto'; src: url('Roboto-Light-webfont.eot'); src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-Light-webfont.woff') format('woff'), url('Roboto-Light-webfont.ttf') format('truetype'), url('Roboto-Light-webfont.svg#RobotoLight') format('svg'); font-weight: 100; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('Roboto-LightItalic-webfont.eot'); src: url('Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-LightItalic-webfont.woff') format('woff'), url('Roboto-LightItalic-webfont.ttf') format('truetype'), url('Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg'); font-weight: 100; font-style: italic; }
@font-face { font-family: 'Roboto'; src: url('Roboto-Medium-webfont.eot'); src: url('Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-Medium-webfont.woff') format('woff'), url('Roboto-Medium-webfont.ttf') format('truetype'), url('Roboto-Medium-webfont.svg#RobotoMedium') format('svg'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('Roboto-MediumItalic-webfont.eot'); src: url('Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-MediumItalic-webfont.woff') format('woff'), url('Roboto-MediumItalic-webfont.ttf') format('truetype'), url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg'); font-weight: 300; font-style: italic; }

ตรวจสอบให้แน่ใจว่าเปลี่ยน "src" ให้ชี้ไปที่พาธของโฟลเดอร์แบบอักษร

จากนั้นสามารถใช้ไวยากรณ์ font-family:"Roboto"; เพื่อแสดงแบบอักษร Roboto บนเว็บเพจของคุณ

สรุป

แบบอักษร Roboto ของ Google เป็นทางเลือกที่ทันสมัยแทนแบบอักษรหลักๆ เช่น Helvetica และ Arial นอกจากนี้ยังเป็นหัวใจสำคัญของ Material Design ของ Google แม้จะเช่นนั้น Roboto ทำงานได้ดีในแอปพลิเคชันทุกประเภท และการติดตั้งบน Windows, macOS, Linux และแม้แต่เว็บไซต์ก็ง่ายมาก

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