2010-05-30 16 views
15

phông chữ của tôi về sự lựa chọn thường mặc định văn bản số liệuCó cách nào để chỉ định việc sử dụng văn bản hoặc các số liệu trong CSS không?

Text figures http://hypftier.de/dump/numerals-text.png

đó là lý do tôi thích chúng. Tuy nhiên, đối với các bảng hoặc tiêu đề tôi muốn xác định rằng số liệu lót nên được sử dụng:

Titling figures http://hypftier.de/dump/numerals-titling.png

Có cách nào để làm như vậy trong CSS?

(Để xoa dịu tìm kiếm:

  • kiểu cũ chữ số, số liệu văn bản, số liệu không lót, chữ số thời trung cổ
  • chữ số lót, con số titling)
+0

ví dụ sẽ được tốt đẹp – Jason

+0

Tôi đã có thể nghĩ đây là cụ thể cho các phông chữ. Tôi không biết bất cứ điều gì như thế này trong CSS. – Tom

+0

@ Jason: Tôi đã giả định rằng đó là kiến ​​thức phổ biến, xin lỗi. Đã chỉnh sửa. – Joey

Trả lời

5

Firefox 4.0 có số text figure support. Dưới đây là làm thế nào để bật (kiểu cũ) con số văn bản:

.text-figures { 
    -moz-font-feature-settings: "onum=1"; 
} 

Hình như có một tập hợp các thuộc tính CSS3, chẳng hạn như font-variant-numeric, để kiểm soát tài sản chung. Chúng chưa được hỗ trợ bởi bất kỳ trình duyệt nào, theo như tôi biết.

Đây là một jsFiddle nơi bạn có thể chơi xung quanh với các kiểu. Nó chuyển đổi giữa lớp lót và hình dạng cũ. Tôi đang sử dụng Minion Pro trên Windows 7, vì vậy bạn có thể phải tìm phông chữ được hỗ trợ của riêng mình trên các nền tảng khác.

+0

Vẫn là một giải pháp độc quyền * thở dài *. Tôi muốn, CSS sẽ nhận được sự hỗ trợ như vậy, cuối cùng. – Joey

+0

Vâng, ở đó, ở dạng dự thảo. Chúng tôi chỉ phải chờ cho đến khi các trình duyệt hỗ trợ nó. Tôi hy vọng Firefox có thể khá nhanh chóng trên đó, vì họ đã có sự hỗ trợ - nó chỉ là một sự thay đổi giao diện. – theazureshadow

+0

@Joey: IE10 hỗ trợ một số tính năng đa dạng sử dụng '-ms-font-feature-settings': http://ie.microsoft.com/testdrive/Graphics/OpenType/ Cũng xem http://caniuse.com/font-feature –

2

Không, không có tài sản đó trong số CSS 2.1 specification. Trình duyệt web chọn phông chữ có sẵn trong hệ thống và hiển thị phông chữ theo bất kỳ kiểu ‘mặc định’ nào.

Giao diện nhanh trong CSS 3 Working Draft cũng không tiết lộ tùy chọn như thế này.

Và mặc dù bạn có thể sử dụng thuộc tính @font-face trong newer browsers, dường như không có tùy chọn để chọn các tính năng OpenType nói chung (như sử dụng lining or oldstyle figures).

Tìm kiếm nhanh cho thấy đã có cuộc thảo luận về điều này trên W3 CSS mailing list.


Cập nhật: Lấy cảm hứng từ Creating Custom Font Stacks with Unicode-Range tôi quyết định cung cấp cho unicode-range sở hữu một thử. Than ôi, bạn không thể thay đổi bảng tra cứu để sử dụng các số liệu tùy chỉnh khi sử dụng các số liệu thông thường 0-9.

Nhưng mặc dù không thuận tiện để nhập các chữ số trong phạm vi Unicode cao (ví dụ: sử dụng Unicode code converter), nó có thể sử dụng một tập hợp con số cụ thể, ví dụ: xếp các chữ số cho các bảng (và hình chữ nhật):

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=utf-8> 
    <title>Table numerals</title> 
    <style> 
    @font-face { 
    font-family: Calluna; 
    src: url(http://localhost/Calluna-Regular.otf); 
    } 
    body { font-family: Calluna } 
    #f { font-size: 32pt } 
    </style> 
</head> 
<body> 
    <p id="f">Table figures: </p> 
</body> 
</html> 
+2

Hm, tôi lo sợ nhiều. Điều thú vị là CSS cho phép kiểm soát khá tốt về sắp chữ trong một số trường hợp và gần như hoàn toàn bỏ qua kiểu chữ. – Joey

+0

@Johannes Bạn có thể, tất nhiên, sử dụng mức chi tiết đó để làm những gì bạn muốn. Sử dụng @ font-face, bạn có thể xác định kiểu thay thế là "Font Name Lining" hoặc gán nó như bạn sẽ là một phông chữ hoàn toàn khác. –

+0

@D_N: đã đồng ý, mặc dù @ font-face là [không được hỗ trợ rộng rãi] (http://webfonts.info/wiki/index.php?title=%40font-face_browser_support). –

1

tính năng OpenType đang được hỗ trợ trong nhiều trình duyệt:

font-feature-settings: 'lnum' 

kiểu cũ cũng được hỗ trợ thông qua 'onum'. Bạn có thể bỏ qua '= 1' cho các cờ boolean.

Xem Mozilla's description để biết thêm chi tiết hoặc this more thorough writeup các tính năng phông chữ khác nhau.

+0

+1 Dưới đây là danh sách các giá trị có thể có: https://css-tricks.com/almanac/properties/f/font-feature-settings/#article-header-id-0 Tất nhiên, phông chữ bạn đã chọn cần phải có những nhân vật cụ thể đó –

1

Hãy thử điều này ..

body { 
     -moz-font-feature-settings:"lnum" 1; 
     -moz-font-feature-settings:"lnum=1"; 
     -ms-font-feature-settings:"lnum" 1; 
     -o-font-feature-settings:"lnum" 1; 
     -webkit-font-feature-settings:"lnum" 1; 
     font-feature-settings:"lnum" 1; 
     font-variant-numeric: lining-nums; 
    } 
+0

Điều này khác với câu trả lời của theazureshadow từ bốn năm trước, hay câu trả lời của Alex từ 2 năm trước? – Joey

Các vấn đề liên quan