การตั้งค่าแบบอักษรน้ำหนักเทียบกับแบบอักษรหนาตระกูลใน CSS ซึ่งถูกต้องมากขึ้น?

9

โดยทั่วไปมีสองวิธีในการสร้างแบบอักษรที่เป็นตัวหนาใน CSS: ผ่านfont-familyแอตทริบิวต์และผ่านfont-weightแอตทริบิวต์

สมมติว่าฉันกำลังใช้ฟอนต์Ralewayและโหลด Light, แบบธรรมดา, แบบ Semibold และแบบ Bold ผ่าน css ผมอาจจะเปลี่ยนหัวหนาง่ายโดยการตั้งค่ามันหรือh1{font-family: 'Raleway Bold'}h1{font-weight: 700}

ข้อใดถูกกว่ากันหรือทั้งสองอย่างนี้เหมือนกัน

css web-fonts html

— Pooja
แหล่งที่มา

ฉันสงสัยว่าการเขียน "font-weight" ใน css นั้นถูกต้องเมื่อคุณมีตัวเลือกทั้งหมดในตระกูล font เช่น: แบบอักษร Raleway มีตัวเลือกทั้งหมดตั้งแต่แสงไปจนถึงตัวหนาพิเศษ ดังนั้นวิธีการที่เหมาะสมในการใช้แบบอักษรทั้งหมดจากตระกูลเพื่อที่เราจะไม่สามารถหลวมตัวอักษร

— pooja

1

ที่เกี่ยวข้องมาก Q & A

— Cai

@poojaa ฉันมีอิสระในการแก้ไขคำถามของคุณเพื่อให้การจัดรูปแบบชัดเจนขึ้นและนำคำถามจริงมาสู่เบื้องหน้ามากขึ้น หากคุณรู้สึกว่าฉันได้เปลี่ยนความหมายคุณสามารถแก้ไขได้ด้วยตนเอง

— PieBie

6

สมมติว่าเราได้โหลดชุดตัวอักษรแบบหนาเป็นดังนี้:

@font-face {
  font-family: 'Raleway Bold';
  font-style: normal;
  font-weight: 700;
  src: url(path/to/font/raleway-bold.woff2) format('woff2');
}

ฉันจะยืนยันในความโปรดปรานของการใช้ทั้งสองfont-familyและfont-weightในสเปคสไตล์ของคุณ ตัวอย่างเช่น:

h1 {
  font-weight: 700;
  font-family: 'Raleway Bold', Helvetica, Arial, sans;
}

โดยพื้นฐานแล้วทั้งสองทำสิ่งเดียวกัน: บอกหัวเรื่องของคุณให้กล้าหาญ สิ่งนี้จะไม่เพิ่มความกล้าหรือสิ่งใดเป็นสองเท่า

เหตุผลนี้ค่อนข้างง่าย: หากไฟล์ฟอนต์ของคุณไม่ได้โหลด (เซิร์ฟเวอร์โอเวอร์โหลดข้อ จำกัด ไคลเอนต์วูดู) ผู้เข้าชมของคุณจะยังคงเห็นตัวอักษรหนา (ในกรณีนี้คือเฮลเวติกาแบบตัวหนา) และสามารถแยกแยะระหว่างชื่อ font-familyและข้อความของร่างกายซึ่งจะไม่เป็นกรณีที่ได้คุณระบุไว้เท่านั้น

ดูในภาพนี้ชุดยอดนิยมคือ Raleway และ Raleway Italic แต่มี Raleway Italic ที่ถูกโหลดด้วย:

<link href='https://fonts.googleapis.com/css?family=Raleway:500,500italic' rel='stylesheet' type='text/css'>

ด้านล่างเป็นเพียงการโหลด Raleway เป็นผลให้ชุดล่างมีตัวเอียง Raleway และ FAUX Raleway สังเกตความแตกต่างในตัวพิมพ์เล็ก "a" และ "k" ตัวอย่างเช่นระหว่างตัวเอียงตัวเอียงจริงและตัวเอียง faux แบบอักษรที่ออกแบบมาอย่างดีจะมีความแตกต่างระหว่างตัวหนาตัวเอียงและตัวเอียงที่คุณจะไม่ได้รับหากคุณไม่โหลด

— PieBie
แหล่งที่มา

การใช้ชื่อตระกูลเดียวและน้ำหนักการตั้งค่าเพียงอย่างเดียวจะยังคงให้น้ำหนักที่ถูกต้องในกรณีที่ไฟล์ฟอนต์ไม่โหลด เหตุผลเดียวที่จะใช้ทั้งสองอย่างนั้นก็เพื่อเหตุผลด้านความเข้ากัน

— Cai

1

คุณกำลังสับสน ตัวอย่างแบบอักษร Google ของคุณไม่เพียง แต่ดูที่ Raleway เอียงเป็นเพียงfont-family: 'Raleway'(ขัดแย้งตัวอย่างเช่นตัวหนาของคุณบน) แต่ยังคำนึงถึงการตั้งชื่อทั้งครอบครัวRalewayหรือตัวแปรแต่ละรายบุคคลที่มีชื่อ font-family ที่แตกต่างกันมีอย่างไม่มีแบริ่งในการใช้มารยาทหรือไม่ . แม้ตัวอย่างของคุณเองพิสูจน์นี้เป็นวิธีการที่ไม่ถูกต้องเป็นของคุณให้ไว้font-family: 'Raleway Bold', Helvetica, Arial, sans;ไม่ได้Helvetica BoldและArial Boldไม่ซ้ำกันเพราะนั่นเป็นเพียงวิธีที่ไม่ถูกต้องไปน้ำตกตัวอักษรตัวแปร

— rgthree

1

ในขณะที่ทั้งสองวิธีจะให้ผลลัพธ์ที่ถูกต้องแก่คุณ แต่วิธีที่ถูกต้องมากขึ้นคือการใช้ฟอนต์ตระกูลเดียวเพื่อจัดกลุ่มน้ำหนักและสไตล์ที่แตกต่างกันทั้งหมด มันเป็นวิธีเดียวกับที่คุณใช้แบบอักษรของระบบ (จาก 'Arial' ลงไปถึง 'sans-serif') และที่จริงแล้วถ้าคุณใช้แบบอักษรของ Google เพื่อโหลด Raleway คุณจะต้องใช้เส้นทางตระกูลแบบอักษรเดียว

ลองร่างด้วยเหตุผลหลายประการว่าทำไมนี่เป็นวิธีที่ถูกต้อง

มันลดความซับซ้อนของ CSS และขนาดไฟล์ในที่สุด

การมีแบบอักษรตระกูลเดียวหมายความว่าคุณสามารถกำหนดองค์ประกอบทั้งหมดที่มีตระกูลแบบอักษรและองค์ประกอบบางอย่างเท่านั้นที่มีน้ำหนัก / สไตล์แตกต่างกัน ทำสิ่งต่อไปนี้เช่น:

html {
  font-family: Raleway;
}
.bold {
  font-weight: 700;
}
.italic {
  font-style: italic;
}
.footer {
  font-family: Arial;
}

<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>

สังเกตว่า CSS นี้ดีและสวยงามแค่ไหน เราไม่จำเป็นต้องระบุ "RalewayBold" เป็นฟอนต์ตระกูลสำหรับ. หนาหรือ "RalewayItalic" สำหรับ .italic ของเรา Infact เราไม่จำเป็นต้องระบุตัวแปรตัวหนา & ตัวเอียงเนื่องจากคลาสของเราจะใช้งานได้ นอกจากนี้หาก. ตัวหนาอยู่ใน. footer ของเรามันจะเป็นตัวหนา Arial และไม่ใช่ Raleway เพราะมันจะเป็นการสืบทอด Arial จากคอนเทนเนอร์ส่วนท้าย

มันเป็นวิธีที่เบราว์เซอร์ทำ

ข้างต้นเป็นหลักว่าสไตล์ชีทภายในเบราว์เซอร์กำหนดแบบอักษรโดยใช้รูปแบบที่น้อยที่สุดและธรรมชาติเรียงซ้อนของ CSS

มันเป็นวิธีที่อุตสาหกรรมทำและทำได้

คุณสมบัติเว็บแอปพลิเคชั่นและผู้จัดพิมพ์ที่ใหญ่ที่สุดทำอย่างนี้ Google, Facebook, NYT, ESPN ฯลฯ ทั้งหมดกำหนดและใช้แบบอักษรในลักษณะนี้

ไม่เพียงแค่นั้น แต่ส่วนต่อประสานกับผู้ใช้ก่อน CSS หรือแม้กระทั่งอินเทอร์เน็ตจะระบุตระกูลฟอนต์เดี่ยวและเลือกชุดตัวเลือกตามน้ำหนักและสไตล์ที่แตกต่างกัน โหลด Microsoft Word, KeyNote, Google เอกสารแม้กระทั่ง WordPerfect ที่เก่าแก่ที่สุดในช่วงปลายทศวรรษ 1990 และเปิดแบบอักษรแบบเลื่อนลง คุณจะเห็นชื่อฟอนต์ตระกูล "Arial" ไม่ใช่ "Arial" ตามด้วย "Arial Bold" ตามด้วย "Arial Italic" เป็นต้น

เพียงโหลดจาก Google Fonts

หากคุณโหลด Raleway จากที่เก็บ webfonts ฟรีใน Google Fonts คุณจะเห็น Raleway ถูกกำหนดด้วยชื่อนามสกุล:

https://fonts.googleapis.com/css?family=Raleway:400,400italic,500,500italic,700,700italic

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url(https://...Raleway-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 500;
  src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
}
@font-face {
  font-family: 'italic';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}

— rgthree
แหล่งที่มา

วิธีนี้ไม่ได้เพิกเฉยต่อความแตกต่างระหว่างรูปแบบตัวอักษรสำหรับแบบ faux

— Ryan

@ Ryan ไม่เลย ในความเป็นจริงชื่อของครอบครัวตัวอักษร(อย่างใดอย่างหนึ่งได้อย่างถูกต้อง bundling ครอบครัวเป็นRalewayที่มีน้ำหนัก / สไตล์สายพันธุ์หรือไม่ถูกต้องกำหนดตัวแปรของแต่ละบุคคลRaleway BoldและRaleway Italicเป็นบุคคลตัวอักษรครอบครัว)ไม่มีผลต่อการใช้รูปแบบมารยาทหรือไม่ อันที่จริงแล้วการรวมตระกูลในชื่อเดียวกันอย่างถูกต้องจะช่วยให้เบราว์เซอร์สามารถเลือกรูปแบบที่ใกล้เคียงยิ่งขึ้นเพื่อใช้สไตล์แบบ faux ในขณะที่การตั้งชื่อแต่ละรูปแบบแยกกันอย่างไม่ถูกต้องจะทำให้เบราว์เซอร์มืด

— rgthree

(1) โหลดจากแบบอักษร Google : สำหรับเว็บไซต์ที่แน่ใจ แต่มีอีกหลายกรณีที่ใช้ html / css ซึ่งไม่รับประกันการเชื่อมต่ออินเทอร์เน็ตและคุณต้องโหลดแบบอักษรในเครื่อง (2) ลดความซับซ้อนของ CSS ในที่สุดขนาดไฟล์ : ดังนั้นคุณจะโกน 1kb บนเว็บไซต์หรือแอพที่มีหลายสิบ MB ลูกค้าจะทึ่งกับความเร็วในการโหลดแอปของคุณ (3) เป็นวิธีที่เบราว์เซอร์ / อุตสาหกรรมทำ : เบราว์เซอร์ ค่าเริ่มต้นเป็นมารยาทและ 'อุตสาหกรรม' นั้นไม่ถูกต้องเสมอไปหรือไม่ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด (เพียงแค่ดู flexbox)

— PieBie

เบราว์เซอร์เริ่มต้นเพื่อมารยาทอะไร? คุณไม่รู้ชัดเจนว่าคุณกำลังพูดถึงอะไร เมื่อคุณระบุfont-family:Arial; font-weight:bold;(ซึ่งเป็นวิธีที่ถูกต้องอีกครั้งโดยไม่คำนึงว่าเป็น Arial หรือ Raleway) คุณคิดว่าเบราว์เซอร์กำลังใช้ตัวหนามารยาทกับรูปแบบอักษร Arial ทั่วไปหรือไม่ ไม่ถูกต้อง เบราว์เซอร์กำลังโหลดรูปแบบตัวอักษร ArialBold ตามที่ระบบกำหนดและหากไม่มีแบบอักษรที่แน่นอนเท่านั้นมันจะใช้สไตล์มารยาทกับแบบอักษรที่ตรงกันที่สุดที่ดีที่สุดตามชื่อตระกูลตระกูลซึ่งเป็นสาเหตุที่พวกเขาต้องเหมือนกัน! ไม่สามารถพูดว่า "ทำสิ่งนี้เพื่อ Arial แต่ไม่ใช่ Raleway"

— rgthree

0

นี่คือสิ่งที่ถ้าคุณถามคำถามเกี่ยวกับ Raleway, webfont โปรแกรมสำหรับ CSS ทั้งสองวิธีทำงานได้ดีเท่า ๆ กัน ในกรณีนี้ใช้ font-weight เพราะเป็นแนวทางการกระทำที่ "ถูกต้อง" ซึ่งจะง่ายที่สุดในการเปลี่ยนแปลงและควบคุมโดยไม่มีการเปลี่ยนแปลงที่สำคัญในรหัส

ตอนนี้คุณเริ่มมีปัญหาเมื่อคุณฝังแบบอักษรด้วยตัวเองแบบอักษรที่ไม่จำเป็นต้องวางแผนสำหรับ css และน้ำหนักอาจไม่ตรงกับตัวเลข

ด้วยเหตุนี้ข้อผิดพลาดที่พบบ่อยมากเกี่ยวกับแบบอักษรฝังตัวที่พบบ่อยมากในแบบอักษรที่ไม่ใช่ภาษาอังกฤษคือ css "ตัวหนา" หรือ "จางลง" แบบอักษรโดยอัตโนมัติและผลลัพธ์ไม่ดีมาก

ดังนั้นฉันขอแนะนำว่าถ้าคุณใช้ webfont เหมือนแบบอักษรบน google แบบอักษรไปข้างหน้าและใช้ตัวเลขแบบอักษรน้ำหนัก แต่เมื่อคุณฝังแบบอักษรด้วยตัวคุณเองให้อยู่ในด้านความปลอดภัยและใช้แบบอักษรตระกูลสำหรับทุกน้ำหนักแยกต่างหาก .

— Naty
แหล่งที่มา