Kích thước của phông chữ dịch chính xác là gì?

Tôi có một phông chữ 40 pixel mà tôi đang cố dịch thành các hình ảnh tùy chỉnh. Tôi đang cố gắng khớp chính xác kích thước của hình ảnh, nhưng tôi gặp một số vấn đề về việc có kích thước chính xác. Về cơ bản, những gì nó đi xuống là đây. Khi một phông chữ cho biết đó là X pixel, điều này có nghĩa là gì?

Đây là một câu hỏi xuất sắc, có một câu trả lời khá không thỏa đáng.

Kích thước của loại, cho dù được chỉ định bằng pixel, điểm (1/72 ") hoặc milimet, là chiều cao của hình vuông, một hộp vô hình thường lớn hơn một chút so với khoảng cách từ mức tăng dần cao nhất đến mức giảm dần thấp nhất.

Cho rằng đây là một biện pháp hơi độc đoán

• phụ thuộc vào thiết kế kỹ thuật chính xác của phông chữ
• không thể được đo chính xác từ một mẫu in hoặc rasterized

nó không có ý nghĩa hay hữu ích, ngoài việc gần đúng.

Trong trường hợp của bạn, hãy tìm ra kích thước bạn cần chỉ định trong Photoshop để phù hợp với kết xuất của trình duyệt bằng thử nghiệm. Bạn sẽ thấy đây là một tỷ lệ không đổi cho bất kỳ phông chữ nào, nhưng tôi sẽ không nghĩ đây là trường hợp nếu bạn thay đổi trình duyệt hoặc HĐH.

Thời gian ASCII! Giả vờ hai hộp bên dưới là những miếng chì từ năm 1900 trở đi. Trước đó, kiểu chữ được đúc bằng chì (hoặc được định tuyến trong gỗ). Đối với loại được đặt thành khóa in, chúng phải được kết nối với các khối rắn. Đây là nơi mà kích thước của loại (tính theo điểm) đến từ:

+--------------+  +-------------+  <----+
|              |  |             |       |
|      XX      |  |             |       |
|     X  X     |  |             |       |
|    XX  XX    |  |             |       |
|    XX  XX    |  |     X       |
|    XXXXXX    |  |    X X      |   Point size of the type
|   XX    XX   |  |    XXX      |
|   XX    XX   |  |   X   X     |       |
|  XX      XX  |  |   X   X     |       |
|  XX      XX  |  |             |       |
|              |  |             |       |
+--------------+  +-------------+  <----+

Lưu ý hai chữ cái ở trên có kích thước khác nhau, nhưng hộp giới hạn của chúng là như nhau. Như vậy, về điểm, cả hai phông chữ này đều có cùng kích thước.

Ngày nay, chúng ta không tạo ra nhiều loại chì và gỗ và hầu hết là kỹ thuật số. Tuy nhiên, khái niệm về kích thước điểm vẫn tồn tại ở chỗ có một hộp ảo có cùng chiều cao cho mỗi chữ cái mà loại được đặt. Một lần nữa, đây là hộp ảo xác định kích thước điểm thay vì các phép đo vật lý của chính các mẫu chữ. Kích thước thực tế của các mẫu chữ thường nhỏ hơn kích thước điểm (nhưng cũng có thể lớn hơn).

Loại đo bằng pixel không hoạt động vì điều đó, tuy nhiên, bạn có thể 'đặt' loại pixel bằng CSS và tương tự. Trình duyệt thực hiện bản dịch tốt nhất có thể giữa kích thước px được khai báo. Nhưng nó luôn luôn là một ước tính mờ.

Cuối cùng, không có cách chính xác nào để có được hai kiểu chữ chính xác có cùng kích thước bằng cách nhìn chúng một cách trực quan và thay đổi kích thước của mỗi cái cho đến khi bạn thấy chúng có cùng kích thước.

"Kích thước phông chữ" của một phông chữ đề cập đến "chiều cao em" của phông chữ, không nhất thiết phải giống với chiều cao của các ký tự cụ thể trong phông chữ.

Thông thường , chiều cao em của một phông chữ tuân theo cùng một ý tưởng cơ bản - nó sẽ được đặt gần đúng với khoảng cách từ phần giảm dần thấp nhất (chẳng hạn như phần dưới của chữ cái g) đến phần tăng dần cao nhất (chẳng hạn như phần trên của chữ cái h):

Như bạn có thể thấy, không có chữ cái nào bao gồm toàn bộ khoảng đó.

Với phông chữ kỹ thuật số, "chiều cao em" của phông chữ là lựa chọn của nhà thiết kế phông chữ và hoàn toàn không phải tuân theo quy ước này: một nhà thiết kế loại kỹ thuật số có thể chọn bất kỳ nền tảng nào cho kích thước em của họ. Tuy nhiên, phông chữ vẫn có xu hướng tuân thủ, ít nhất là đại khái, theo loại quy ước được mô tả ở trên. Ngày xưa khi loại bao gồm các khối kim loại, "chiều cao em" là chiều cao của một trong những khối đó, cần phải đủ cao không chỉ cho bất kỳ nhân vật nào trong kiểu chữ đó mà còn cho bất kỳ người lên, xuống và dấu.

Bây giờ, nhiều kiểu chữ hiện đại bao gồm cả các dấu trên chữ in hoa (chẳng hạn như Ć) - những dấu này mở rộng ra bên ngoài kiểu chữ truyền thống và do đó, các ký tự đặc biệt này (và có thể là các ký tự đặc biệt khác) nằm ngoài đầu "em". Vì lý do lịch sử, chúng tôi không điều chỉnh kích thước em để cho phép những điều này, chúng tôi giữ kích thước em và chỉ cần mở rộng ra - bất kỳ người đánh máy nào sử dụng các dấu như vậy sẽ cần phải đảm bảo có không gian để chúng mở rộng, mặc dù thường là khoảng cách dòng là đầy đủ trong văn bản cơ thể.

Các khoảng cách dòng trong văn bản cơ thể là một không gian còn lại giữa descender của một dòng văn bản và Ascender của dòng dưới nó - đó là, "font size" không bao gồm đo khoảng cách dòng này. Nó có thể bị ảnh hưởng bởi trường CSS line-height, trong đó1.4có nghĩa là khoảng cách dòng là 0,4 lần chiều cao em và do đó, toàn bộ dòng văn bản cơ thể sẽ chiếm 1,4 lần chiều cao em bao gồm cả khoảng cách dòng. Trong các ứng dụng khác, khoảng cách dòng có thể được chỉ định khác nhau: bộ xử lý văn bản thường chỉ định theo nhiều khoảng cách dòng "đơn", nhưng không giống như trong CSS, thông thường khoảng cách "đơn" không có nghĩa là không có khoảng cách dòng, nhưng một số dòng "mặc định" gap, nơi ứng dụng cố gắng đưa ra một mặc định dựa trên siêu dữ liệu trong tệp phông chữ. Có nhiều tiêu chuẩn để chỉ định số liệu trong phông chữ (ví dụ: trong Truetype, có các tiêu chuẩn Mac và Windows / OS2 khác nhau) để khoảng cách dòng mặc định có thể khác nhau giữa các ứng dụng và hệ điều hành.

Bây giờ, ngay cả khi một nhà thiết kế thực hiện theo một quy ước có thể dự đoán chiều cao cho em của họ, điều này vẫn không cho bạn biết kích thước của chữ in hoa (cap-chiều cao) hoặc kích thước của một nói o(x chiều cao hoặc đường giữa) vì chúng có thể khác nhau tự do giữa các kiểu chữ liên quan đến chiều cao tăng dần. Trong một họ phông chữ, chúng thường sẽ nhất quán. Vì vậy, ví dụ, Times New Roman Bold và Times New Roman đều sẽ có cùng kích thước ký tự cho cùng một kích thước em, bao gồm cả tăng dần, hạ xuống, chiều cao mũ và chiều cao x.

Hãy thử nhập ký tự thanh dọc ('|') và đo nó. Nếu tôi sao chép chính xác tình huống của bạn và khử răng cưa của bạn không làm mờ nó quá nhiều, thì nó sẽ là 22px.

22px đại diện cho chiều cao của khối loại. Nhưng mỗi nhân vật lấp đầy khối khác nhau. A 'g' hoặc 'q' sẽ chiếm vùng dưới của 22px đó, trong khi chữ in hoa và chữ thường như 'b' hoặc 'd' sẽ chiếm các phần trên. '|' là một trong những ký tự duy nhất (nếu không phải là duy nhất) sẽ lấp đầy không gian 22px.

Tôi không biết làm thế nào để so sánh với các cài đặt CSS của bạn, nhưng điều đó giải thích cách Photoshop diễn giải chiều cao văn bản.

Bạn có chắc chắn phông chữ của bạn được đo bằng pixel? Hầu hết các phông chữ thời gian được đo bằng điểm. Một điểm là 1/72 inch. Vì vậy, phông chữ 40 pt cao 40/72 "hoặc 5/9". Các kicker là đó là kích thước từ đỉnh của người lên trên các chữ cái cao đến dưới cùng của con cháu trên các chữ cái treo bên dưới đường cơ sở. Đó là lý do tại sao chiều cao x đôi khi được sử dụng, như đã đề cập ở trên. Đó là chiều cao của các chữ cái viết thường không dán lên hoặc xuống.

Dù bằng cách nào, các phép đo không bao giờ chính xác dù sao, thật không may. Bạn sẽ chỉ cần một số phép đo và tính toán (và / hoặc thử và sai) để thực hiện những gì bạn đang cố gắng.