Tại sao các hậu duệ của tôi bị cắt bỏ khi sử dụng CSS @ font-face?

Tôi đang sử dụng API webfonts của Google để nhúng Droid Sans trên một trang. Tất cả là tốt, ngoại trừ các hậu duệ (tức là các bit nguy hiểm trên y, g, v.v.). Các phiên bản mới nhất của Firefox, IE và Chrome trên hộp Windows Vista của tôi tất cả đều bị cắt.Tại sao các hậu duệ của tôi bị cắt bỏ khi sử dụng CSS @ font-face?

<!DOCTYPE html> 
<html> 
<head> 
<title>Droid sans descender test</title> 
<meta charset="utf-8"> 
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css"> 
<style type="text/css"> 
    body { font-size: 16px; font-family: "Droid Sans", sans-serif; } 
    h1, h2, h3 { margin: 1em 0; font-weight: normal; } 
    h1 { font-size: 2em; } 
    h2 { font-size: 1.5em; } 
    h3 { font-size: 1em; } 
</style> 
</head>  
<body> 
<h1>A bug ran under the carpet anyway</h1> 
<h2>A bug ran under the carpet anyway</h2> 
<h3>A bug ran under the carpet anyway</h3> 
</body> 
</html>

Đoạn mã trên trông như thế này:

Descenders getting cut off http://thinkdrastic.net/journal/wp-content/uploads/2010/06/descenders.png

Tôi đã thử line-height, font-size, padding vv vô ích. Tôi đã có một số thành công với font-size-adjust, nhưng lần cuối cùng tôi kiểm tra nó là Gecko. Có ai biết về một sửa chữa cho điều này?

Nguồn

2010-06-03 Olly Hodgson

Hoạt động tốt trên MacOS WebKit. Bạn đã cố gắng cho một biên độ lớn hơn? –

Đúng. Tôi nghi ngờ điều này sẽ là một trong những câu hỏi "đó chỉ là cách Windows thực hiện". –

Đây có thể chỉ là lỗi sao chép-dán, nhưng "font-family:" Droid Sans "sans-serif;' cần dấu phẩy. – kevingessner

Với một số trợ giúp từ @adamliptrot, tôi phát hiện ra rằng hậu duệ của Droid Sans hoàn toàn ổn với một vài kích thước pixel chính xác: 18, 22 và 27px. Tôi điều chỉnh của em tôi cho phù hợp:

h1 { font-size: 1.6875em; } 
h2 { font-size: 1.375em; } 
h3 { font-size: 1.125em; }

Không lý tưởng, nhưng nó hoạt động:

The descenders work! http://thinkdrastic.net/journal/wp-content/uploads/2010/06/fixed-descenders.png

Nguồn

2010-06-03 16:35:07

Điều này có thể có nghĩa là mọi thứ sẽ thất bại một lần nữa ở bất kỳ loại zoom nào, hoặc trên màn hình độ phân giải không chuẩn. –

Dường như hoạt động tốt ở các mức thu phóng khác nhau. Cho rằng nó chỉ là một trục trặc thị giác nhỏ mà chỉ xảy ra trên Windows, và trong trường hợp này nó là một mạng nội bộ với một thiết lập phần cứng khá đồng nhất tôi không * quá * lo lắng. Chắc chắn một cái gì đó để giữ một mắt trên mặc dù :) –

Đã có cùng một vấn đề với một phông chữ 'Walkway' và ma thuật 1.6875em con số làm việc cho rằng quá ... lỗi hệ thống lẻ – Andiih

Tôi đã kiểm tra tệp ttf được tham chiếu và thậm chí trong trình xem phông chữ của cửa sổ, các con cháu đang bị cắt. Dường như có nhiều vấn đề hơn với phông chữ đang được phân phát thay vì theo kiểu của bạn.

Nguồn

2010-06-03 14:52:12 Soumya

Vì vậy, họ làm. Tôi tự hỏi nếu đây là một vấn đề với các phông chữ hoặc với phông chữ Windows rendering? –

chúng tôi đã gặp vấn đề tương tự ... chúng tôi cố gắng sử dụng phông chữ sóc. chúng tôi đã thử sử dụng phông chữ web của google. Phông chữ tiếp tục cắt các chữ "treo" như g. Ngoài ra, phiên bản được lưu trữ trên google không xuất hiện đúng và rõ ràng như các phiên bản khác. Phông chữ dường như hơi bị thay đổi.

Giải pháp của chúng tôi:

Chúng tôi tự lưu trữ phông chữ mà không định dạng phông chữ cho web. Sau đó, chúng tôi đã chuyển đổi tệp ttf thành tệp svg, .eot và .otf và tải lên các tệp đó dưới dạng các bản sửa lỗi của chúng tôi cho vd. V.v.

Nguồn

2011-12-16 06:27:07 mastawebb

Mặc dù câu hỏi của bạn có liên quan đến API phông chữ web của Google, nguyên tắc câu trả lời của tôi bên dưới là như nhau.

Nếu hậu duệ bị cắt khi phân phát phông chữ TrueType, nguyên nhân có thể nhất là số liệu OS/2 được đặt không chính xác (âm) trên phông chữ.

Các giá trị có thể cần điều chỉnh là WinAscent & WinDescent.

Một sửa chữa nhanh chóng và bẩn sẽ được điều chỉnh các cả 0.

Điều này có thể được thực hiện bằng Font Forge. Khi phông chữ được mở trong FontForge, bạn có thể truy cập vào các tham số này thông qua hộp thoại 'Font Info'.

Nguồn

2012-05-10 13:41:08 uniquelau

Điều này dường như không làm việc cho tôi. Tôi đã thay đổi thành công các chỉ số này trong fontforge, nhưng vấn đề vẫn tồn tại. – wprater

Bạn có thể gửi cho tôi phông chữ không, tôi sẽ xem tại sao điều này không hoạt động. – uniquelau

Điều này chỉ giúp tôi tìm ra sự cố với phông chữ mà tôi đã tạo bằng MyScriptFont.com. Chỉ số OS/2 đã được đặt thành giá trị sai. Cám ơn. – Urs

Nếu mũi ở phía trên cùng - thay đổi font-size để ....

h1 { font-size: 1.6875em; } 
h2 { font-size: 1.375em; } 
h3 { font-size: 1.125em; }

không làm việc cho bạn, sau đó thêm "line-height" để các phần tử đó là cắt đứt xuống của .``

Nguồn

2012-05-31 14:19:58 chaser7016

Thú vị. 'line-height' không làm việc cho tôi chút nào, nhưng một số kích thước pixel nhất định đã làm. Các kích thước 'em' đó có thể không phù hợp với bạn nếu kích thước phông chữ cơ sở của bạn khác nhau. –

Nếu bạn đang sử dụng Font Squirrel, có vẻ như vấn đề với biến thể sans đã được sắp xếp, nhưng vấn đề vẫn còn với biến thể serif của Font Squirrel.

Để sửa chữa biến thể serif, hãy chuyển đến Trình tạo phông chữ web và tải các tệp phông chữ bạn cần (không dựa vào gói mà chúng cung cấp).

Nhấp vào nút radio 'Chuyên gia', để tất cả các cài đặt nhưng trong 'Tuỳ chọn nâng cao' thay đổi 'Giá trị hình vuông' thành '2162' và tạo phông chữ.

này ám chỉ rằng phông chữ đúng ở tất cả kích thước

Nguồn

2013-04-12 16:29:11

Điều đó không giải quyết được cho tôi. Tôi gặp sự cố ở mức 14,8-15,2 px (IE)/15,0 - 15,1 px (Chrome, Firefox) với Open Sans. Ngay cả sau khi đặt giá trị hình vuông em từ 2048 đến 2162, vấn đề đó vẫn tồn tại. Có lẽ cố gắng thậm chí giá trị lớn hơn có thể đã làm việc, nhưng tôi cho rằng tôi sẽ lựa chọn chỉ để tránh phạm vi vấn đề. –

-2

tôi đã có một tình trạng khó xử tương tự và sửa chữa line-height làm việc cho tôi (tức là tôi đã thêm mã này vào phần Tùy chỉnh CSS):

h2 { line-height: 140%; }

Nguồn

2014-12-23 22:32:17

Tôi chỉ đoán ở đây, nhưng tôi đã có cùng một vấn đề xảy ra khi phông chữ được thay thế. Tôi chỉ tự hỏi nếu điều này xảy ra khi nói thay thế phông chữ thay thế phông chữ 1024em bằng phông chữ 1000em hoặc ngược lại. Tôi đã có một số cắt giảm lớn descender sử dụng một phông chữ 2048em. Có thể đáng để điều tra.

Nguồn

2016-02-20 02:02:14 Beathoven

Tại sao các hậu duệ của tôi bị cắt bỏ khi sử dụng CSS @ font-face?

Trả lời

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