Điều chỉnh Kerning trong CSS

Question

Có thể với CSS để điều chỉnh kerning trong CSS không? Tôi muốn để có thể kern một khối văn bản như vậy mà nó sẽ thực sự trông giống như một khối văn bản (cả hai cạnh trái và phải được liên kết).

CHỈNH SỬA: Sử dụng http://letteringjs.com/ kết hợp với http://www.kernjs.com/ làm cho hiệu quả khá tốt. Đối với vấn đề ban đầu, http://fittextjs.com/ giải quyết điều này một cách độc đáo.

Answer 1

Một số kiểm soát trên kerning có thể đạt được trong CSS sử dụng the letter-spacing attribute.

Tuy nhiên, nếu tất cả những gì bạn cần là nhận được "cả cạnh trái và lề phải", bạn có thể muốn thử sử dụng text-align: justify.

CHỈNH SỬA: CSS3 xác định thuộc tính font-kerning có thể được sử dụng để bật hoặc tắt kerning cho các yếu tố cụ thể.

Answer 2

Căn chỉnh về chữ cả trái và phải được gọi là biện minh. Kerning là nhiều hơn về việc điều chỉnh không gian giữa các chữ cái, và không có nhiều việc phải làm với căn chỉnh (bởi vì biện minh cho văn bản là điều chỉnh nhiều khoảng cách giữa các từ hơn ký tự). Dù sao, bạn muốn thiết lập các text-align tài sản để justify:

<p style="text-align:justify"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum tincidunt ante mollis ornare. Nulla id 
nulla justo. Mauris quis sapien ac orci consequat accumsan. Quisque iaculis ipsum ac nulla venenatis sagittis. Aliquam 
hendrerit mi a turpis malesuada nec dictum est vehicula. Curabitur quis dolor eu metus malesuada dictum adipiscing et 
risus. Aliquam erat volutpat. Aenean pharetra aliquam magna, fringilla tempus erat iaculis eu. Suspendisse potenti. 
Sed fringilla lobortis viverra. 
</p> 

Answer 3

Khi người dùng Typeoneerror trả lời, letter-spacing không không ảnh hưởng đến kerning. Xem khái niệm sành điệu tại Wikipedia.

Kerning không được kiểm soát bởi khoảng cách chữ cái và không có font-kerning cho CSS1 hoặc CSS2. Các đặc điểm kỹ thuật mới, CSS3, chưa được phê duyệt như một tiêu chuẩn (W3C khuyến nghị), nhưng có một tài sản đề nghị font-kerning, xem 2012 dự thảo,

http://www.w3.org/TR/css3-fonts/#font-kerning-prop

Chỉ cụ thể phông chữ, như OpenFonts, have this property.

CSS không "điều khiển kerning", nhưng nếu sử dụng khác không letter-spacing các "kerning con người nhận thức" có thể bị mất. Ví dụ: tăng cường kerning với letter-spacing:-0.1em và bị mất với letter-spacing:0.5em.

Với CSS1 letter-spacing tài sản mà bạn có thể mất hoặc tăng cườngkerning nhận thức, và thành một "văn bản thư-cách nhau", bạn có thể mô phỏng kerning:

<div style="font-size:20pt;background-color:#bcd"> 

    VAST <small>(normal)</small> 
    <br/> 

    <span style="letter-spacing:-0.1em">VAST</span> 
    <small>(enhance perception)</small> 
    <br/> 

    <span style="letter-spacing:0.5em">VAST</span> 
    <small>(lost perception)</small> 
    <br/> 

    <!-- SIMULATE KERNING AT SPACED TEXT --> 
    <div style="letter-spacing:6pt"> 
    SIMULATE: <span style="letter-spacing:4pt">VA</span>ST TEXT 
    </div> 

</div> 

Xem above example here.

---

EDIT : Tôi không thay đổi văn bản gốc trên ngày hôm nay, Tôi mở câu trả lời cho những thay đổi của bạn (chế độ Wiki), cho proofreading và cập nhật. Hiện tại đây là câu trả lời được bình chọn nhiều nhất (21 so với 10) và HTML5 will be a recommendation ...Xin vui lòng, giúp cải thiện văn bản này (và/hoặc văn bản được liên kết của Wikipedia!).

Answer 4

Xem dự án của tôi Jerning.com [xem bên dưới] để xem văn bản.

Cách sử dụng rất đơn giản và dựa của cặp nhân vật, ví dụ:

<h1>Hello World</h1> 

Các W và o sẽ trông lạ mà không kerning.

Đơn giản chỉ cần làm:

$('h1').jerning("Wo", -0.1); 

mà sẽ áp dụng kerning giữa tất cả chữ hoa W s và chữ thường o s trong h1 thẻ.

---

tôi nghỉ hưu dự án Jerning nhưng hãy tìm mã nguồn minified dưới đây để đưa vào dự án của bạn nếu bạn muốn:

(function(b){function e(a,c){var d;if(b.isPlainObject(a))d=a;else try{d=b.parseJSON(a)}catch(f){d=b.parseJSON('{"'+a+'":'+c+"}")}return d}function h(a,c){var d="";b(a).replaceWith(b.map(a.nodeValue.split("").reverse(),function(a,e){var g=a;b.each(c,function(c,e){d==c[1]&&a==c[0]&&(g=b.fn.wrapCharacter(a,e))});d=a;return g}).reverse().join(""))}b.fn.wrapCharacter=function(a,b){return'<span style="letter-spacing:'+b+'em">'+a+"</span>"};b.fn.jerning=function(a,c){var d=e(a,c),f=this.contents();b.each(f, 
function(a,c){1==c.nodeType&&b(c).jerning(d);3==c.nodeType&&h(c,d)});return this}})(jQuery); 

Đáng tiếc là tôi không có phiên bản không minified nữa; ở trên đi kèm với không có bảo đảm của tất cả các trường hợp làm việc!

Answer 5

Kerning, khoảng cách chữ cái (còn gọi là theo dõi) và biện minh cho các khối là ba thuộc tính typography khác nhau.

Liên kết mới nhất mà tôi tìm thấy về kerning là từ TypeKit, với hướng dẫn về cách bật dữ liệu kerning được nhúng với các webfont của chúng. http://blog.typekit.com/2014/02/05/kerning-on-the-web/#comment-19916

Chỉnh sửa thủ công - điều chỉnh khoảng cách giữa mỗi chữ cái trong một từ - sẽ luôn là vấn đề về sở thích và sở thích. Và có thể đạt được thông qua kern.js hoặc kerning.js

Điều gì làm cho giải pháp TypeKit nổi bật với tôi, cho phép tự động soạn thảo toàn bộ văn bản nội dung bằng cách sử dụng siêu dữ liệu trong phông OpenType. Tôi chỉ tìm thấy nó, và tôi rất vui khi sử dụng nó trong dự án tiếp theo của tôi!

Để tham khảo dễ dàng, các thuộc tính css mới được thảo luận trong các liên kết là:

text-rendering: optimizeLegibility; 
font-feature-settings: "kern"; 
font-kerning: normal; 

Với tiền tố cho font-feature-settings bao gồm:

-webkit-font-feature-settings: "kern"; 
    -moz-font-feature-settings: "kern"; 
    -moz-font-feature-settings: "kern=1"; 

Answer 6

gì dường như được yêu cầu là kerning năng động, bởi vì những gì Chủ đề Opener và tôi cũng/đang cần là điều này: biện minh không khối liên kết, càng tốt càng tốt, bằng cách thêm không gian giữa các từ, mà lá "lỗ" trong khối văn bản. Bây giờ thay vào đó là dòng có căn chỉnh bên trái (do đó không có khoảng trống), tính chiều rộng vật lý của nó, so sánh với chiều rộng khối có sẵn, chia máng khác nhau cho số chữ cái trong dòng đó, sau đó sử dụng giá trị này làm phần bổ sung không gian chữ. Điều này sẽ trông giống bố cục báo hơn là chỉ có văn bản căn chỉnh: biện minh. Tôi phải nói tho, tôi không chắc chắn liệu các dòng trong một textblock có thể được truy cập "bằng số dòng" trong một bố trí trang động, có thể nó? chỉnh sửa: Tôi đã thử hôm qua. Tôi sử dụng innerHTML để đọc nội dung của một khối văn bản, sau đó tôi tách và sao chép nó vào một mảng trong đó mỗi mục/dòng nhận được thẻ DIV và id riêng của nó. Sau đó, tôi ajust letterspacing cho phù hợp. Chỉ có một vài trong số các trình duyệt mới nhất hỗ trợ subpixel-letterpacing, do đó, nó chỉ hoạt động với các phông chữ có kích thước trung bình đến lớn.Vấn đề tôi gặp phải là: do không có Subpixelsupport nó chỉ hoạt động ở một mức độ nào đó, mặc dù rất đẹp, vì vậy tôi đã cố gắng bổ sung cho kết quả với thuộc tính text-align, nhưng nó không hoạt động sau khi tôi thay đổi chữ cái. alignement hoạt động, nhưng không phải là "justify", cái này chỉ hoạt động trước khi thêm chữ cái. Có thể là một vấn đề opera. Nếu tôi có thể sửa lỗi này thì tôi sẽ đăng mã.

chỉnh sửa 2. nó hoạt động ngay bây giờ nhưng vì một lý do nào đó tôi không thể đăng mã ở đây. đó là từ webkit 10.3.3.13 trên thiết bị di động. Gửi cho tôi một tin nhắn nếu bạn quan tâm đến mã.