วิธีสร้าง“ ตัวเลขตัวพิมพ์เล็ก” (เช่นตัวเลขข้อความ) ทำอย่างไร


12

มีวิธีที่ยอมรับได้ในการปรับ glyphs แบบอักษรเพื่อจำลองตัวเลขข้อความหรือไม่?

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

พื้นหลัง

ตัวเลขข้อความเป็นตัวเลข "ตัวพิมพ์เล็ก" ตามปกติคุณจะใช้ตัวเลขตัวพิมพ์เล็กและใช้ข้อความตัวพิมพ์เล็ก (เช่นกลางประโยค)

คีย์บอร์ดไม่เคยถูกสร้างด้วยตัวพิมพ์ใหญ่และตัวเลขตัวพิมพ์เล็ก และ Unicode ไม่ได้เข้ารหัสเฉพาะพวกเขาเนื่องจาก"พวกเขาไม่ได้พิจารณาตัวละครแยกต่างหากจากร่างที่มีการเรียงแถว

ซึ่งนำมาสู่คำถามของฉัน วิธีที่ยอมรับในการสร้างตัวเลขตัวพิมพ์เล็กจาก "ตัวพิมพ์ใหญ่มาตรฐานของแบบอักษรคืออะไร

วิกิพีเดียกล่าวว่าโดยปกติ :

  • 012มีxความสูง
  • 68 มีอำนาจขึ้น
  • 34579 มีสืบทอด

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

ความพยายามครั้งแรกของฉัน (ใน photoshop) คือ:

  • smush 012
  • เขยิบ34579ลง
  • ปล่อยให้68พวกเขาอยู่ที่ไหน:

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

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

แต่ตัวเลขที่skwooshed (0, 1, 2) ดูไม่เป็นที่พอใจอย่างชัดเจน

ถ้ากลุ่มยูนิโค้ดแนะนำว่า "ตัวพิมพ์เล็ก" สามารถสร้างจากตัวอักษรตัวใหญ่ "te" - พวกเขาแนะนำให้ฉันทำอะไร?

นึกคิดใน HTML

เป้าหมายสุดท้ายของฉันคือการแสดงข้อความตัวพิมพ์เล็กในเบราว์เซอร์ ฉันรู้ว่าแบบอักษรบางส่วน (เช่นจอร์เจีย) แสดงตัวเลขทั้งหมดเป็นตัวพิมพ์เล็กแล้ว:

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

แต่ฉันไม่ได้ถามถึงวิธีการเปลี่ยนไปใช้จอร์เจีย ; ฉันถามว่าจะสร้างตัวเลขซับจากที่ไม่ใช่ซับได้อย่างไร

และเนื่องจากนี่คือเพื่อแสดงบนเว็บฉันรู้ว่าฉันอาจท้ายต้องใช้การจัดรูปแบบอักขระต่อ:

<!doctype html">
<html>
<head>
    <style type="text/css">
        body {
            font-family: "Segoe UI", "Calibri", sans-serif;
            font-size: larger;
        }

        .xheight {
            font-size: 1.5ex;
        }

        .descender {
            position: relative;
            bottom: -0.4ex;
        }
    </style>
</head>
<body>
    <p>In the year <span class="xheight">21</span><span class="descender">5</span><span>6</span> the Romulan war...
</body>
</html>

แสดงผลเป็น:

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

ซึ่งอีกครั้งไม่ได้ดูน่าพอใจอย่างที่ฉันคิดว่ามันควร

เฮ้มองเงิน!

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

คำตอบ:


11

คำตอบสั้น ๆ คือ "ไม่"

ตัวเลขแบบเก่า ("ตัวพิมพ์เล็ก") นั้นถูกวาดขึ้นโดยเฉพาะ Legacy Postscript และแบบอักษร TrueType ส่วนใหญ่จะมีเฉพาะตัวเลขแบบตารางซึ่งเป็นแบบแถวหรือแบบเก่าตามวิธีการออกแบบแบบอักษร

The Unicode Consortium ไม่ได้แนะนำว่ารูปที่มีการบุในนั้นสามารถบิดเบี้ยวเป็นรูปแบบเก่าได้เพียงแค่มีค่า Unicode เพียงชุดเดียวสำหรับตัวเลข 0-9 โดยไม่คำนึงว่ามีสัญลักษณ์หลายตัวในแต่ละหลักหรือไม่

แบบอักษร OpenType หลายแบบมีทั้งแบบบุและแบบโบราณทั้งในแบบตารางและแบบกว้างตามสัดส่วน แอปพลิเคชันทั้งหมดที่มี OpenType-aware จะพร้อมใช้งานสำหรับแอปพลิเคชันทั้งหมดซึ่งโดยทั่วไปจะผ่านการตั้งค่าในลักษณะของอักขระหรือย่อหน้า พวกเขาแบ่งปันค่า Unicode แต่พวกเขาจะแยกร่ายมนตร์สำรองที่มีอยู่ (หรือไม่) เป็นโครงร่างในซอฟต์แวร์ตัวอักษร (จากตระกูลตัวอักษรใน CSS ของคุณ Calibri มีรูปแบบเก่า ๆ แต่ Segoe UI ไม่มี)

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


คำตอบที่ดี แต่ดูเหมือนว่าจะถามคำถามเมื่อเบราว์เซอร์จะรับรู้ OpenType อย่างเต็มที่เท่าที่สามารถระบุใน CSS ได้ว่ารูปแบบตัวเลขใดที่จะใช้เมื่อแบบอักษรมีทั้งสองอย่าง
e100

1
นอกจากนี้ยังเป็นจุดสำคัญที่ไม่มีทางรับรองได้ว่า "Segoe UI", "Calibri" หรือแม้แต่ sans-serif เป็นแบบอักษรจริงที่แสดง ค่าพื้นฐานและค่า x ความสูงที่แน่นอนที่ใช้อาจดูน่ากลัวยิ่งขึ้นใน Arbitrary Olde Style ที่ผู้ใช้ติดตั้ง
horatio

ความเข้าใจใด ๆ เกี่ยวกับเหตุผลที่ Unicode Consortium ไม่ได้เข้ารหัสร่ายมนตร์แยกต่างหากสำหรับพิมพ์ใหญ่และพิมพ์เล็กตัวเลข แต่ไม่ได้เข้ารหัสร่ายมนตร์แยกต่างหากสำหรับพิมพ์ใหญ่A( U+0041), พิมพ์เล็กa( U+0061) และแม้กระทั่งsᴍᴀʟʟcᴀᴘɪᴛᴀʟ ( U+1D00)? คือเหตุผลที่แยกตัวอักษรตัวพิมพ์ใหญ่และตัวพิมพ์เล็กแยกกัน แต่มีตัวอักษรตัวพิมพ์ใหญ่และตัวพิมพ์เล็กแยกกันอะไร
เอียนบอยด์

และสุดท้ายคุณสามารถตั้งชื่อฟอนต์ OpenType ที่มีทั้งตัวอักษร "ตัวพิมพ์ใหญ่"และ"ตัวพิมพ์เล็ก" ได้หรือไม่?
เอียนบอยด์

1
@IanBoyd: อักขระตัวพิมพ์ใหญ่และตัวพิมพ์เล็กปกติมีความแตกต่างในความหมายและการสลับระหว่างตัวอักษรเหล่านั้นเป็นมากกว่าตัวเลือกโวหาร อย่างไรก็ตามตัวพิมพ์ใหญ่และตัวพิมพ์เล็กมีความหมายเหมือนกันดังนั้นจึงไม่มีอะไรที่ Unicode ต้องการเข้ารหัส - ด้วยเหตุผลเดียวกับที่ไม่มีการเข้ารหัสเฉพาะสำหรับตัวเอียงตัวพิมพ์เล็กและตัวพิมพ์เล็กที่คล้ายกัน อักขระตัวพิมพ์ใหญ่ขนาดเล็กที่คุณค้นหาจะถูกเข้ารหัสเพราะมีความหมายที่แตกต่างในสัทศาสตร์และไม่ควรใช้สำหรับการเน้น (สำหรับสิ่งนี้คุณควรใช้คุณสมบัติ OpenType หรือคล้ายกัน)
Wrzlprmft

5

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

การตั้งค่า CSS ที่คุณกำลังมองหาคือ

font-feature-settings: "onum";

และเอกสารประกอบ:

เอกสารของคุณสมบัติ OpenType และonumคุณลักษณะโดยเฉพาะอย่างยิ่งสามารถพบได้ในรีจิสทรีแท็ก OpenType เค้าโครงไมโครซอฟท์

เอกสารทางเลือกเกี่ยวกับตัวอักษรที่มีให้บริการในบทความวิธีการรหัส OpenType องค์ประกอบใน CSS

อย่างเป็นทางการคุณควรจะใช้

font-variant-numeric: oldstyle-nums;

แต่ได้รับการสนับสนุนที่ดูเหมือนว่าจะยิ่งปรับตัวลดลงตามเบราว์เซอร์อ้างอิงความเข้ากันได้ของ Mozilla

ในทางทฤษฎีสิ่งนี้ดีกว่าเพราะมันไม่ได้อ้างถึงคุณสมบัติของ OpenType โดยตรงดังนั้นจึงควรทำงานกับแบบอักษรที่ไม่ใช่ของ OpenType ด้วย ในทำนองเดียวกันคุณควรใช้:

font-variant: small-caps; 

เพื่อเปิดใช้งานแคปขนาดเล็ก ไม่ได้ใช้การตั้งค่าดังกล่าวเป็นคุณลักษณะ OpenType

font-feature-settings: "smcp";

เพื่อให้บรรลุผลนี้เนื่องจากfont-variantคุณสมบัติได้รับการสนับสนุนเป็นอย่างดี


ไม่คุณไม่ต้องการใช้font-variant: small-caps;เพราะมันสร้างตัวพิมพ์เล็กปลอม ใช้อีกอันหนึ่งเสมอและใช้แบบอักษร OpenType เสมอ ง่ายและแก้ไข
tchrist

ตามคำนิยาม ( w3.org/TR/CSS21/fonts.html#propdef-font-variant ) ก็acceptableถ้าsmall-capsคุณลักษณะแกล้ง นั่นไม่ใช่ข้อกำหนดและตัวแทนผู้ใช้ที่มีคุณภาพสูงจะทำสิ่งที่ถูกต้อง (แมปกับคุณลักษณะของ OpenType) font-feature-settingsผมเห็นว่าถ้าคุณค่อนข้างมีการเปลี่ยนแปลงแทนแคปขนาดเล็กไม่มีแกล้งคุณควรใช้ โดยปกติตัวพิมพ์เล็กปลอมจะดีกว่าไม่มีผลเลย
Mikko Rantalainen
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.