Làm thế nào để xây dựng các chữ số viết thường của Nhật Bản (tức là số liệu văn bản)?


12

Có một cách được chấp nhận để điều chỉnh glyphs phông chữ để mô phỏng các số liệu văn bản ?

nhập mô tả hình ảnh ở đây

Lý lịch

Số liệu văn bản là chữ số "chữ thường". Bạn thường sử dụng các chữ số viết thường trong đó bạn cũng sử dụng văn bản chữ thường (ví dụ ở giữa câu).

Bàn phím không bao giờ được tạo ra với chữ số viết hoa và chữ thường; và Unicode không mã hóa cụ thể chúng, vì "chúng không được coi là các ký tự riêng biệt từ các hình xếp hàng, chỉ là một cách viết khác nhau cho các ký tự."

Điều này đưa tôi đến câu hỏi của tôi; cách được chấp nhận để tạo các số liệu chữ thường trong số "chữ hoa" tiêu chuẩn của phông chữ là gì?

Wikipedia đề cập rằng bình thường :

  • 012xcao
  • 68 có thăng thiên
  • 34579 có con cháu

nhập mô tả hình ảnh ở đây

Nỗ lực đầu tiên của tôi (bằng photoshop) sẽ là:

  • nhếch nhác 012
  • di chuyển 34.579 xuống
  • để lại 68 nơi họ đang ở:

nhập mô tả hình ảnh ở đây

nhập mô tả hình ảnh ở đây

Nhưng các số liệu skwooshed (0, 1, 2) trông khó chịu rõ rệt.

Nếu tập đoàn Unicode gợi ý rằng "chữ số viết thường" có thể được xây dựng đơn giản từ chữ "chữ hoa" - họ khuyên tôi nên làm gì?

Lý tưởng nhất trong HTML

Mục tiêu cuối cùng của tôi là hiển thị văn bản chữ thường trong trình duyệt. tôi biết một số phông chữ (ví dụ Georgia) đã hiển thị tất cả các chữ số của chúng dưới dạng chữ thường:

nhập mô tả hình ảnh ở đây

Nhưng tôi không hỏi làm thế nào để chuyển sang sử dụng Georgia ; Tôi đang hỏi làm thế nào để xây dựng các số liệu lót từ những người không lót.

Và vì điều này là để hiển thị trên web, tôi nhận ra rằng có lẽ cuối cùng tôi phải áp dụng định dạng cho mỗi ký tự:

<!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>

Hiển thị như:

nhập mô tả hình ảnh ở đây

Mà, một lần nữa, trông không được hài lòng như tôi nghĩ nó nên.

Này này, một xu!

nhập mô tả hình ảnh ở đây

Câu trả lời:


11

Câu trả lời rất ngắn là "Không".

Số liệu kiểu cũ ("chữ thường") được vẽ đặc biệt theo cách đó. Phần lớn các phông chữ Postcript và TrueType, chỉ chứa các hình dạng bảng, là các lớp lót hoặc kiểu cũ theo cách thiết kế phông chữ.

Unicode Consortium không gợi ý rằng các số liệu lót có thể bị biến dạng thành các số liệu kiểu cũ, chỉ đơn giản là chỉ có một bộ giá trị Unicode cho các chữ số 0-9, bất kể có nhiều glyph cho mỗi chữ số hay không.

Nhiều phông chữ OpenType chứa cả số liệu lót và kiểu cũ, ở cả chiều rộng bảng và tỷ lệ, với các số liệu lót bảng là mặc định thông thường. Tất cả đều có sẵn cho các ứng dụng nhận biết OpenType, thường thông qua cài đặt ưu tiên theo kiểu ký tự hoặc đoạn văn. Chúng chia sẻ các giá trị Unicode, nhưng chúng được vẽ riêng các glyph thay thế tồn tại (hoặc không) như các phác thảo trong phần mềm phông chữ. (Trong số các họ phông chữ trong CSS của bạn, Calibri có các số liệu kiểu cũ, nhưng Segoe UI thì không.)

Từ quan điểm chính tả, không chỉ không có cách nào được chấp nhận để làm những gì bạn yêu cầu, tôi còn nói rằng cũng không cách nào được chấp nhận . Như bạn đã phát hiện ra, cố gắng đến đó bằng cách thay đổi đường cơ sở và làm biến dạng các hình vẽ lót trông thật kinh khủng.


Câu trả lời tốt, nhưng dường như đặt ra câu hỏi khi các trình duyệt sẽ hoàn toàn nhận biết OpenType, đến mức có thể chỉ định trong CSS kiểu số nào sẽ sử dụng khi một phông chữ chứa cả hai.
e100

1
Đây cũng là một điểm quan trọng chỉ ra rằng không có cách nào để đảm bảo rằng "Segoe UI", "Calibri", thậm chí cả sans-serif là phông chữ thực sự được hiển thị. Các giá trị đường cơ sở và x chiều cao chính xác được sử dụng có thể trông còn khủng khiếp hơn trong Arbitrary Olde Style mà người dùng đã cài đặt.
horatio

Bất kỳ hiểu biết nào về lý do tại sao Unicode Consortium không mã hóa các glyph riêng biệt cho chữ số viết hoa và chữ thường, nhưng đã mã hóa các glyph riêng biệt cho chữ hoa A( U+0041), chữ thường a( U+0061) và thậm chí là sᴍᴀʟʟ cᴀᴘɪᴛᴀʟ ( U+1D00)? Tức là những gì có thể là lý do loại trừ các chữ cái viết hoa và chữ thường riêng biệt, nhưng bao gồm các chữ cái viết hoa và chữ thường riêng biệt?
Ian Boyd

Và cuối cùng, bạn có thể đặt tên cho phông chữ OpenType chứa cả hai chữ số "chữ hoa""chữ thường" không?
Ian Boyd

1
@IanBoyd: Các ký tự chữ hoa và chữ thường thông thường có ý nghĩa riêng biệt và do đó chuyển đổi giữa chúng không chỉ là một sự lựa chọn phong cách. Tuy nhiên, số chữ hoa và chữ thường giống nhau về ý nghĩa, và do đó, đơn giản là không có gì mà Unicode muốn mã hóa - vì lý do tương tự là không có mã hóa cụ thể cho chữ nghiêng, chữ hoa nhỏ, chữ thường và tương tự. Các ký tự chữ hoa nhỏ bạn tìm thấy chỉ được mã hóa vì chúng có ý nghĩa riêng biệt về ngữ âm và không nên được sử dụng để nhấn mạnh (đối với điều này, bạn nên sử dụng các tính năng OpenType hoặc tương tự).
Wrzlprmft

5

Cách chính xác để hiển thị chữ số / số chữ thường hoặc "Số liệu kiểu cũ" là sử dụng CSS để chọn một tính năng phông chữ phù hợp. Rõ ràng, phông chữ được sử dụng sau đó sẽ hỗ trợ tính năng phông chữ này. Hỗ trợ thế giới thực với webfont dường như không quá mạnh.

Cài đặt CSS bạn đang tìm kiếm là

font-feature-settings: "onum";

và tài liệu:

Tài liệu về các tính năng OpenType và onumđặc biệt là tính năng, có thể được tìm thấy trong sổ đăng ký thẻ OpenType Layout của Microsoft .

Tài liệu thay thế về các tính năng phông chữ có sẵn trong bài viết Cách mã hóa các tính năng OpenType trong CSS .

Chính thức, bạn nên sử dụng

font-variant-numeric: oldstyle-nums;

nhưng sự hỗ trợ cho điều đó dường như còn yếu hơn theo tham chiếu Tương thích Trình duyệt của Mozilla .

Về lý thuyết, điều này tốt hơn bởi vì nó không đề cập trực tiếp đến các tính năng OpenType nên nó cũng hoạt động với các phông chữ không phải OpenType. Theo cùng một cách bạn nên sử dụng:

font-variant: small-caps; 

để kích hoạt mũ nhỏ . Đừng không sử dụng tính năng OpenType thiết như

font-feature-settings: "smcp";

để đạt được hiệu ứng này vì font-varianttài sản đã được hỗ trợ tốt.


Không, bạn không bao giờ muốn sử dụng font-variant: small-caps;vì điều đó tạo ra những cái mũ nhỏ FAKE . Luôn sử dụng cái khác và luôn sử dụng phông chữ OpenType. Đơn giản và giải quyết.
tchrist

Theo định nghĩa ( w3.org/TR/CSS21/fonts.html#propdef-font-variant ) acceptablenếu small-capstính năng bị làm giả. Đó không phải là một yêu cầu và tác nhân người dùng chất lượng cao sẽ làm điều đúng đắn (ánh xạ nó tới tính năng OpenType). Tôi đồng ý rằng nếu bạn không có thay đổi thay vì làm giả các nắp nhỏ, bạn nên sử dụng font-feature-settings. Thông thường mũ nhỏ giả tốt hơn là không có tác dụng gì cả.
Mikko Rantalainen
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.