ฉันจะใช้แบบอักษร Roboto ของ Google บนเว็บไซต์ได้อย่างไร

164

ฉันต้องการใช้แบบอักษร Roboto ของ Google บนเว็บไซต์ของฉันและฉันกำลังติดตามบทช่วยสอนนี้:

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

ฉันได้ดาวน์โหลดไฟล์ที่มีโครงสร้างโฟลเดอร์ดังนี้:

ป้อนคำอธิบายรูปภาพที่นี่

ตอนนี้ฉันมีสามคำถาม:

  1. ฉันมี CSS ในmedia/css/main.cssURL ของฉัน ดังนั้นฉันต้องวางโฟลเดอร์นั้นไว้ที่ไหน?
  2. ฉันต้องแยก eot, svg ทั้งหมดออกจากโฟลเดอร์ย่อยทั้งหมดและใส่ในfontsโฟลเดอร์หรือไม่?
  3. ฉันจำเป็นต้องสร้างไฟล์ css fonts.css และรวมไว้ในไฟล์เทมเพลตฐานของฉันหรือไม่?

ตัวอย่างที่เขาใช้นี้

@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'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

URL ของฉันควรเป็นอย่างไรหากฉันต้องการมีโครงสร้าง dir เช่น:

/media/fonts/roboto

html  css  fonts 
— user26
แหล่งที่มา

คำตอบ:

258

คุณไม่จำเป็นต้องทำสิ่งนี้

  • ไปที่หน้าเว็บแบบอักษรของ Google
  • ค้นหาRobotoในช่องค้นหาที่ด้านบนขวา
  • เลือกชุดรูปแบบของแบบอักษรที่คุณต้องการใช้
  • คลิก 'เลือกแบบอักษรนี้' ที่ด้านบนและเลือกชุดน้ำหนักและชุดอักขระที่คุณต้องการ

หน้าจะให้<link>องค์ประกอบที่จะรวมไว้ในหน้าของคุณและรายการfont-familyกฎตัวอย่างเพื่อใช้ใน CSS ของคุณ

การใช้แบบอักษรของ Google ด้วยวิธีนี้รับประกันความพร้อมใช้งานและลดแบนด์วิดท์ไปยังเซิร์ฟเวอร์ของคุณเอง

— นิลการ์
แหล่งที่มา
ขอบคุณสำหรับสิ่งที่สมบูรณ์แบบ คุณรู้หรือไม่ว่าการตั้งค่า google ใช้สำหรับรายการเพลงใน google play store ฉันต้องการมีสไตล์อย่างนั้น นอกจากนี้ฉันไม่พบลิงค์หรือข้อมูลโค้ดในลิงค์ ฉันเห็นแบบอักษรที่นั่น แต่ไม่มีรหัส
— user26
3
สิ่งที่ยอดเยี่ยมพวกเขายังให้ไฟล์ @import สำหรับ LESS ด้วยเช่นกัน! อย่างไรก็ตามการทดสอบการเชื่อมต่ออินเทอร์เน็ตโดยไม่มีปัญหาการเชื่อมต่อของ Google (เช่น: จีน) = ไม่มีแบบอักษร ... ฉันยังสังเกตเห็นว่าไม่มี Roboto Black (Roboto Bk) font-family: พวกเขาใช้ตัวอักษร 3 ตระกูลเท่านั้น (Roboto, Roboto Condensed และ Roboto Slab) ตัวแปร Roboto อื่น ๆ ทั้งหมดทำผ่านfont-styleและfont-weightการเปลี่ยนแปลง CSS ดังนั้นหลังจากทำการ<link>ตรวจสอบGoogle แล้วว่าแบบอักษรนั้นมีอยู่จริงหรือไม่ ถ้าไม่ใช้ของคุณเอง (btw โหลดไฟล์ทั้งหมดจากตระกูลหนึ่งโดยปกติไม่เกิน 0.5MB)
— เท้า
7
@ user26 <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>วิธีนี้จะโหลดสไตล์ทั้งหมดจากแบบอักษรตระกูลเดียวเท่านั้น: Roboto แต่ถ้าคุณต้องการแบบอักษรที่ไม่ได้อยู่ในแบบอักษร Google (เช่นRoboto สีดำ ) ที่คุณต้องการไฟล์ในโฟลเดอร์ของคุณและคัดลอกโค้ดตัวอย่างที่คุณได้แสดงให้เราเห็นในคำถามของคุณเพื่อ main.css ของคุณ (เช่นนี้@font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.หรือชอบผมแนะนำใน คำตอบของฉัน).
— Armfoot
14
Using Google's fonts this way guaranties availability-1 ไม่มี "การรับประกันความพร้อมใช้งาน" แบบอักษรของ Google ที่น้อยลงมาก ฉันเป็นหนึ่งในพันล้านคนที่ใช้ CDN ของ Google หมายความว่าเว็บไซต์จำนวนมากไม่สามารถโหลดได้อย่างถูกต้องหรือเลย ฉันไม่ได้บอกใครว่าต้องทำอะไร แต่อย่าคิดว่า CDN ของ Google เป็นโซลูชั่นที่สมบูรณ์แบบ
— Nateowami
1
-1 ตามที่ @Nateowami กล่าวว่าคุณใช้เซิร์ฟเวอร์ของ Google (ซึ่งอาจถูกบล็อกในบางประเทศ) มันไม่ดีต่อความเป็นส่วนตัวและประสิทธิภาพการทำงานจะดีกว่าหากคุณโฮสต์ฟอนต์ของคุณใน CDN ด้วยตัวคุณเอง มันทำงานได้มากกว่า แต่นั่นคืองานของคุณใช่ไหม
— Robin Métral
70

มีสองวิธีที่คุณสามารถใช้เพื่อใช้แบบอักษรบนเว็บที่มีลิขสิทธิ์บนหน้าเว็บของคุณ:

  1. บริการโฮสติ้งแบบอักษรเช่น Typekit, Fonts.com, Fontdeck ให้บริการอินเทอร์เฟซที่ง่ายสำหรับนักออกแบบในการจัดการแบบอักษรที่ซื้อและสร้างลิงก์ไปยังไฟล์ CSS หรือ JavaScript แบบไดนามิกที่ให้บริการแบบอักษร Google ยังให้บริการนี้ฟรี ( นี่คือตัวอย่างสำหรับแบบอักษร Roboto ที่คุณร้องขอ) Typekit เป็นบริการเดียวที่ให้คำแนะนำแบบอักษรเพิ่มเติมเพื่อให้แน่ใจว่าแบบอักษรใช้พิกเซลเดียวกันในเบราว์เซอร์

    JS ตัวตักแบบเดียวกับที่ใช้โดย Google และ Typekit (เช่น WebFont loader) มีคลาส CSS และ callback เพื่อช่วยจัดการFOUTที่อาจเกิดขึ้นหรือหมดเวลาตอบสนองเมื่อดาวน์โหลดแบบอักษร

    <head>
  <!-- get the required files from 3rd party sources -->
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  <!-- use the font -->
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }
  </style>
</head>

  2. วิธี DIY เกี่ยวข้องกับการรับแบบอักษรที่มีลิขสิทธิ์สำหรับการใช้งานเว็บและ (เป็นทางเลือก) โดยใช้เครื่องมือเช่นตัวสร้างของ FontSquirrel (หรือซอฟต์แวร์บางตัว) เพื่อปรับขนาดไฟล์ให้เหมาะสม จากนั้นจะมีการใช้งานข้ามเบราว์เซอร์ของ@font-faceคุณสมบัติ CSS มาตรฐานเพื่อเปิดใช้งานแบบอักษร

    วิธีการนี้สามารถให้ประสิทธิภาพการโหลดที่ดีขึ้นเนื่องจากคุณมีการควบคุมที่ละเอียดกว่าสำหรับอักขระที่จะรวมและขนาดไฟล์

    /* get the required local files */
@font-face {
  font-family: 'Roboto';
  src: url('roboto.eot'); /* IE9 Compat Modes */
  src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('roboto.woff') format('woff'), /* Modern Browsers */
  url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* use the font */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
}

เรื่องสั้นสั้น:

การใช้บริการโฮสติ้งแบบอักษรพร้อมกับการประกาศ @ font-face ให้ผลลัพธ์ที่ดีที่สุดเกี่ยวกับประสิทธิภาพโดยรวมความเข้ากันได้และความพร้อมใช้งาน

ที่มา: https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

UPDATE

Roboto: แบบอักษรลายเซ็นของ Google ตอนนี้เป็นโอเพ่นซอร์ส

ตอนนี้คุณสามารถสร้างแบบอักษร Roboto โดยใช้คำแนะนำที่สามารถพบได้ด้วยตนเองที่นี่

— Ashesh Kumar Singh
แหล่งที่มา
17

โพสต์เก่าฉันรู้

สิ่งนี้สามารถทำได้โดยใช้CSS @import url :

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}
— ผ้าขี้ริ้ว
แหล่งที่มา
8
วิธีการแก้ปัญหาของคุณคือรูปแบบการต่อต้านประสิทธิภาพ การใช้แท็กลิงก์ในผลลัพธ์มาร์กอัพของคุณจะดาวน์โหลดไฟล์ CSS ของ Google ได้เร็วกว่า @import; เบราว์เซอร์เพิ่งค้นพบการอ้างอิงทรัพยากรก่อนหน้านี้โดยทั่วไปและโดยเฉพาะอย่างยิ่งเนื่องจากตัวโหลดล่วงหน้า (ขณะแยกวิเคราะห์ HTML กับการแยกวิเคราะห์ HTML ก่อนจากนั้นค้นหาไฟล์ CSS ของคุณจากนั้นดาวน์โหลดไฟล์จากนั้นแยกวิเคราะห์และค้นหา @import แล้ว ดาวน์โหลดสไตล์ชีทที่นำเข้า)
— Radko Dinev
3
ไม่จำเป็น. การใช้ Webpack และปลั๊กอินทั้งหมดนี้จะถูกฝังอยู่ในโครงสร้างการกระจายของคุณ
— สป็อค
5

การsrcอ้างอิงโดยตรงไปยังไฟล์ฟอนต์ดังนั้นหากคุณวางทั้งหมดลงบน/media/fonts/robotoคุณควรอ้างถึงไฟล์เหล่านั้นใน main.css ดังนี้: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

..ไปอีกหนึ่งโฟลเดอร์ขึ้นซึ่งหมายความว่าคุณกำลังหมายถึงmediaโฟลเดอร์ถ้า main.css ที่อยู่ใน/media/cssโฟลเดอร์

คุณต้องใช้../fonts/roboto/ในการอ้างอิง URL ทั้งหมดใน CSS (และต้องแน่ใจว่าไฟล์อยู่ในโฟลเดอร์นี้และไม่อยู่ในไดเรกทอรีย่อยเช่นroboto_black_macroman)

โดยทั่วไป (ตอบคำถามของคุณ):

ฉันมี css ในสื่อ / css / main.css ของฉัน ดังนั้นฉันจะต้องวางโฟลเดอร์นั้นไว้ที่ไหน

คุณสามารถทิ้งไว้ที่นั่น แต่ให้แน่ใจว่าจะใช้ src: url('../fonts/roboto/

ฉันจำเป็นต้องแยก eot, svg ทั้งหมดออกจากโฟลเดอร์ย่อยทั้งหมดและใส่ในโฟลเดอร์แบบอักษร

หากคุณต้องการอ้างถึงไฟล์เหล่านั้นโดยตรง (โดยไม่ต้องวางไดเรกทอรีย่อยในรหัส CSS ของคุณ) ใช่แล้ว

ฉันจำเป็นต้องสร้างไฟล์ css fonts.css และรวมไว้ในไฟล์เทมเพลตฐานของฉันหรือไม่

ไม่จำเป็นคุณสามารถใส่รหัสนั้นลงใน main.css ของคุณได้ แต่เป็นการดีที่จะแยกแบบอักษรออกจาก CSS ที่คุณกำหนดเอง

นี่คือตัวอย่างของไฟล์ LESS / CSS แบบอักษรที่ฉันใช้:

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(ในตัวอย่างนี้ฉันใช้ ttf เท่านั้น) จากนั้นฉันใช้@import "fonts";ในไฟล์ main.less ของฉัน ( น้อยกว่าตัวประมวลผลล่วงหน้า CSS มันทำให้สิ่งนี้ง่ายขึ้นนิดหน่อย )

— Armfoot
แหล่งที่มา
2

นี่คือสิ่งที่ฉันทำเพื่อรับไฟล์ woff2 ที่ฉันต้องการสำหรับการปรับใช้แบบคงที่โดยไม่ต้องใช้ CDN

TEMPORARILY เพิ่ม cdn สำหรับ css เพื่อโหลดแบบอักษร roboto ใน index.html และปล่อยให้โหลดหน้าเว็บ จากเครื่องมือ google dev ดูแหล่งที่มาและขยายโหนด fonts.google.co.th/ และดูเนื้อหาของ css? family = Roboto: 300,400,500 & display = swap file และคัดลอกเนื้อหา ใส่เนื้อหานี้ในไฟล์ css ในไดเรกทอรีทรัพย์สินของคุณ

ในไฟล์ css ให้ลบสิ่งกรีก, ไครลิกและเวียตนามทั้งหมด

ดูบรรทัดในไฟล์ css นี้ที่คล้ายกับ:

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

คัดลอกที่อยู่ลิงก์และวางในเบราว์เซอร์ของคุณมันจะดาวน์โหลดแบบอักษร วางแบบอักษรนี้ลงในโฟลเดอร์ทรัพย์สินของคุณแล้วเปลี่ยนชื่อที่นี่รวมถึงในไฟล์ css ทำสิ่งนี้กับลิงค์อื่น ๆ ฉันมีไฟล์ woff2 ที่ไม่ซ้ำกัน 6 ไฟล์

ฉันทำตามขั้นตอนเดียวกันสำหรับไอคอนวัสดุ

ตอนนี้กลับไปและแสดงความคิดเห็นบรรทัดที่คุณเรียก cdn และใช้แทนใช้ไฟล์ css ใหม่ที่คุณสร้างขึ้น

— Helzgate
แหล่งที่มา
1

ลองสิ่งนี้

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
— นักพัฒนาตะกั่ว
แหล่งที่มา
1

ใช้/ fonts /หรือ/ font /ก่อนชื่อประเภทตัวอักษรใน CSS สไตล์ชีตของคุณ ฉันประสบข้อผิดพลาดนี้ แต่หลังจากนั้นมันทำงานได้ดี

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
— Mohammed Javed
แหล่งที่มา
1

สำหรับเว็บไซต์คุณสามารถใช้แบบอักษร 'Roboto' ด้านล่าง:

หากคุณสร้างไฟล์ css แยกจากนั้นให้วางบรรทัดด้านล่างที่ด้านบนของไฟล์ css เป็น:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

หรือถ้าคุณไม่ต้องการสร้างไฟล์แยกต่างหากให้เพิ่มบรรทัดด้านบนในระหว่าง<style>...</style>:

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

แล้ว:

html, body {
    font-family: 'Roboto', sans-serif;
}
— นายไม่มีใคร
แหล่งที่มา
0

คุณอ่าน How_To_Use_Webfonts.html ที่อยู่ในไฟล์ zip นั้นหรือไม่

หลังจากอ่านแล้วดูเหมือนว่าแต่ละโฟลเดอร์ย่อยของแบบอักษรจะมี. css ที่สร้างไว้แล้วซึ่งคุณสามารถใช้โดยการรวมสิ่งนี้:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
— Barry Colebank Jr
แหล่งที่มา
0

มันเป็นเรื่องง่าย

ทุกโฟลเดอร์ที่คุณดาวน์โหลดมีแบบอักษร roboto แตกต่างกันซึ่งหมายความว่าเป็นแบบอักษรที่แตกต่างกัน

ตัวอย่าง: "roboto_regular_macroman"

ใช้ใด ๆ ของพวกเขา:

1- แยกโฟลเดอร์ของแบบอักษรที่คุณต้องการใช้

2- อัปโหลดใกล้ไฟล์ css

3- ตอนนี้รวมไว้ในไฟล์ css

ตัวอย่างสำหรับการรวมแบบอักษรที่เรียกว่า "roboto_regular_macroman":

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

คอยดูเส้นทางของไฟล์ที่นี่ฉันอัพโหลดโฟลเดอร์ชื่อ "roboto_regular_macroman" ในโฟลเดอร์เดียวกับที่ css อยู่

จากนั้นคุณสามารถใช้แบบอักษรโดยการพิมพ์ font-family: 'Roboto';

— Omar Moustafa
แหล่งที่มา
0

จริงๆแล้วมันค่อนข้างง่าย ไปที่แบบอักษรบนเว็บไซต์ของ Google และเพิ่มลิงก์ไปที่ส่วนหัวของทุกหน้าที่คุณต้องการรวมแบบอักษร

0

ใช้เวลาหนึ่งชั่วโมงแก้ไขปัญหาแบบอักษร

คำตอบที่เกี่ยวข้อง - ด้านล่างสำหรับReact.jsเว็บไซต์:

  1. ติดตั้งโมดูล npm:

    npm install --save typeface-roboto-mono

  2. นำเข้าในไฟล์. js ที่คุณต้องการใช้
    อย่างใดอย่างหนึ่งต่อไปนี้ :

    import "typeface-roboto-mono"; // ถ้ารองรับ
    require('typeface-roboto-mono') การนำเข้า // ถ้าไม่รองรับการนำเข้า

  3. สำหรับองค์ประกอบคุณสามารถใช้
    หนึ่งในด้านล่าง:

    fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui
    font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */
    style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/

หวังว่าจะช่วย

— Manohar Reddy Poreddy
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.