การระบุรูปแบบและน้ำหนักสำหรับ Google Fonts

ฉันใช้แบบอักษร Google ในหน้าเว็บไม่กี่หน้าและชนกำแพงเมื่อพยายามใช้แบบอักษรรูปแบบต่างๆ ตัวอย่าง: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

ฉันกำลังนำเข้าสามใบหน้า Normal, Bold, ExtraBold ผ่านแท็กลิงก์ ใบหน้าปกติแสดงอย่างถูกต้อง แต่ฉันไม่สามารถหาวิธีใช้แบบอักษรใน CSS ของฉันได้

ฉันลองสิ่งต่อไปนี้ทั้งหมดเป็นแอตทริบิวต์สำหรับตระกูลฟอนต์ แต่ไม่มีลูกเต๋า:

• 'เปิด Sans Bold'
• 'เปิด Sans 700'
• 'เปิด Sans Bold 700'
• 'Open Sans: ตัวหนา'

Google เอกสารเองไม่ได้ให้ความช่วยเหลือมากนัก ใครมีความคิดว่าฉันควรเขียนกฎ CSS เพื่อแสดงตัวแปรเหล่านี้อย่างไร

พวกเขาใช้ CSS ปกติ

เพียงใช้ตระกูลฟอนต์ปกติของคุณดังนี้:

font-family: 'Open Sans', sans-serif;

ตอนนี้คุณตัดสินใจได้แล้วว่าแบบอักษรควรมี "น้ำหนัก" เท่าใดโดยการเพิ่ม

สำหรับกึ่งตัวหนา

font-weight:600;

สำหรับตัวหนา (700)

font-weight:bold;

สำหรับตัวหนาพิเศษ (800)

font-weight:800;

เช่นนี้เป็นหลักฐานทางเลือกดังนั้นหากแบบอักษร Google ควร "ล้มเหลว" แบบอักษรสำรองของคุณ Arial / Helvetica (Sans-serif) ให้ใช้น้ำหนักเดียวกันกับแบบอักษรของ Google

สวยฉลาด :-)

โปรดทราบว่าต้องนำเข้าน้ำหนักแบบอักษรที่แตกต่างกันโดยเฉพาะผ่าน URL แท็กลิงก์ (พารามิเตอร์การสืบค้นตระกูลของ URL แบบอักษรของ Google) ในส่วนหัว

ตัวอย่างเช่นลิงก์ต่อไปนี้จะมีทั้งน้ำหนัก 400 และ 700:

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>

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

Thin            100     
Extra Light     200
Light           300
Regular         400
Medium          500
Semi-Bold       600
Bold            700
Black           900

โปรดทราบว่าแบบอักษรน้อยมากที่มีน้ำหนักทั้งหมด 9 แบบ

font-family:'Open Sans' , sans-serif;

สำหรับแสง: font-weight : 100; หรือ font-weight : lighter;

สำหรับปกติ: font-weight : 500; หรือ font-weight : normal;

สำหรับตัวหนา: font-weight : 700; หรือ font-weight : bold;

เพื่อความโดดเด่นยิ่งขึ้น: font-weight : 900; หรือ font-weight : bolder;

คุณสามารถใช้ค่าน้ำหนักที่ระบุใน Google Fonts

body{
 font-family: 'Heebo', sans-serif;
 font-weight: 100;
}