Chuyển đổi giá trị theo dõi chữ cái được đặt trong Photoshop thành khoảng cách chữ cái tương đương trong CSS

Question

Tôi hiện đang xây dựng một trang web từ một PSD. Hầu hết các phông chữ đều có chữ cái theo dõi -25 (<- AV->: Tôi đoán đó là biểu tượng cho khoảng cách chữ cái?).

Làm cách nào để có hiệu ứng tương tự trong CSS? Tôi biết tài sản là letter-spacing: X nhưng nó không có tỷ lệ phần trăm và -25px hoặc pts sẽ là một con số rất lớn!

Answer 1

Bạn có thể sử dụng kích thước em thay vì px, do đó định kích thước khoảng cách tương ứng với kích thước phông chữ (vì vậy 25% của photoshop ở đâu đó khoảng .25em).

Answer 2

Nếu vấn đề của bạn chỉ đơn giản là với việc chuyển đổi đơn vị, bạn có thể sử dụng em thay vì px

Mặc dù em phép số thập phân, nó không thay đổi về tính chính xác rendering. 0.5px hoặc độ chính xác tương đương không được hiển thị trên các trình duyệt - nó sẽ trở thành 0 hoặc 1px. Đơn giản chỉ vì một màn hình không thể hiển thị một nửa pixel, tốt nhất là có thể giả định rằng với tính năng chống răng cưa.

Đối với các phông chữ nhỏ hơn, tính năng chống răng cưa có thể trông tồi tệ hơn khoảng cách. Một tùy chọn khác là tìm một phông chữ web có khoảng cách bạn muốn theo mặc định. Bằng cách này bạn sẽ nhận được kết quả tương tự như những gì bạn muốn, nhưng có lẽ sẽ có nghĩa là thay đổi phông chữ.

Khoảng cách CSS đơn giản là không chính xác như photoshop. Một lý do là photoshop ám cho in ấn - với độ phân giải màn hình/pixel, bạn phải sống với độ chính xác pixel. Mặc dù về mặt lý thuyết nó sẽ có thể với khoảng cách chữ cái mà trở nên chính xác hơn về phóng to vv tôi không biết thực hiện bất kỳ mà thực sự sẽ làm việc theo cách đó.

Nếu khoảng cách chữ chính xác thực sự quan trọng đối với bạn, bạn có thể cố gắng sử dụng SIFR để hiển thị khoảng cách phông chữ chính xác hơn những gì trình duyệt có khả năng - chúng có thể sử dụng thay đổi chống răng cưa. Rõ ràng điều này sẽ chỉ có ý nghĩa nếu khoảng cách giữa các chữ cái là một vấn đề lớn.

Answer 3

Trong các ngữ cảnh như thế này, các số không đơn vị thường ngụ ý một đơn vị typographic là một phần nhỏ của đơn vị em. Nó thường được gọi là "đơn vị". Giá trị của đơn vị này phụ thuộc vào phông chữ và nó được thể hiện dưới dạng giá trị UPM (đơn vị trên mỗi em). Giá trị UPM phổ biến là 1.000, nhưng phông chữ của Microsoft có 2.048 và các giá trị khác cũng xuất hiện. (Vấn đề này được mô tả chi tiết trong bài viết UPM value of 1000 set in stone?)

Giả sử giá trị UPM là 1.000, -25 sẽ ánh xạ tới -0.025em. Thiết lập letter-spacing: -0.025em có xu hướng có một hiệu ứng khá nhỏ: một dòng văn bản dài sẽ trở thành khoảng một "i" ngắn hơn. Hiệu ứng bạn nhận được khi sử dụng CSS sẽ không được mong đợi giống như trong PhotoShop; các cơ chế dựng hình của PhotoShop khác với các cơ chế của trình duyệt.

Answer 4

Trong khoảng cách chữ cái chữ cái được gọi là theo dõi chữ cái và cụ thể là khoảng cách giữa mỗi chữ cái. Vấn đề là tính năng theo dõi thư của Photoshop không chuyển đổi 1: 1 thành Spacing thư trong CSS.

Rất dễ dàng để tính toán chuyển đổi từ Photoshop sang CSS.

công thức để chuyển đổi Photoshop Thư theo dõi để CSS letter-spacing

em Formula

X/1000 = Y 

X is the value of the letter-tracking in Photoshop 
Y is the value in "em" to use in CSS 

Ví dụ

Hãy xem xét ví dụ sau: Photoshop có một giá trị theo dõi thư 200 ..

200/1000 = 0.2 

kết quả là 0.2em bằng CSS.

px Formula

Nếu bạn thích sử dụng "px" giá trị công thức là

X * S/1000 = P 

X is equal to the letter-tracking value in Photoshop 
S is the font-size in pixels 
P is the resulted value in "px" to use in CSS 

Ví dụ

Hãy xem xét ví dụ sau: Photoshop có một giá trị theo dõi thư 200 và một phông chữ -size value of 10.

200 * 10/1000 = 2 

Kết quả là 2px trong CSS.