Làm cách nào để đặt phông chữ 'bán đậm' qua CSS? Font-trọng lượng của 600 không làm cho nó trông giống như bán đậm tôi thấy trong tập tin Photoshop của tôi

Question

Tôi đang thực hiện chuyển đổi Photoshop-to-XHTML và nhà thiết kế trang web sử dụng phông chữ Myriad Pro Semi-bold tốt trong tập tin photoshop, nhưng khi tôi thử tùy chọn bán đậm trong CSS, nó trông khá giống một phông chữ đậm thông thường, quá đậm cho mục đích của tôi. Có cách nào để đạt được một phông chữ bán đậm hơn trong HTML và CSS hoặc tôi chỉ bị mắc kẹt với 'font-weight: 600;'?

Answer 1

Cách thực tế là thiết lập font-family đến một giá trị đó là tên cụ thể của phiên bản nửa đậm, chẳng hạn như

font-family: "Myriad pro Semibold" 

nếu đó là tên. (Cá nhân tôi sử dụng số font listing tool của riêng mình, chạy trên Internet   Trình khám phá chỉ để xem các phông chữ trong hệ thống của tôi theo tên có thể sử dụng trong CSS.)

Trong phương pháp này, không cần thiết phải có font-weight.

Trình duyệt web kém khi triển khai trọng số phông chữ theo sách: phần lớn chúng không thể tìm thấy phiên bản trọng lượng cụ thể, ngoại trừ chữ đậm. Cách giải quyết là bao gồm thông tin trong tên họ phông chữ, mặc dù đây không phải là cách mọi thứ được cho là hoạt động.

Thử nghiệm với giao diện Segoe, thường tồn tại trong các phiên bản trọng số phông chữ khác nhau trên Windows, tôi có thể làm cho Internet   Explorer 9 chọn phiên bản thích hợp khi sử dụng phương pháp logic (sử dụng tên họ phông chữ Segoe UI và khác nhau Giá trị font-weight) nhưng không thành công trên Firefox 9 và Chrome 16 (chỉ hoạt động bình thường và đậm). Trên tất cả các trình duyệt này, ví dụ, thiết lập font-family: Segoe UI Light hoạt động OK.

Answer 2

Đối với tôi, các tác phẩm sau hoạt động tốt. Chỉ cần thêm nó. Bạn có thể chỉnh sửa nó theo yêu cầu của bạn. Đây chỉ là một mẹo hay mà tôi sử dụng.

text-shadow : 0 0 0 #your-font-color; 

Answer 3

Trong CSS, cho font-weight tài sản, giá trị: normal mặc định là giá trị số 400, và bold đến 700.

Nếu bạn muốn chỉ định trọng khác, bạn cần phải cung cấp cho các giá trị số . Giá trị số đó cần được hỗ trợ cho họ phông chữ bạn đang sử dụng.

Ví dụ, bạn sẽ xác định bán táo bạo như thế này:

font-weight: 600; 

đây một JSFiddle sử dụng họ phông chữ 'Open Sans', nạp với trọng lượng trên.

Answer 4

họ phông chữ: 'Mở Sans'; font-weight: 600; quan trọng là phải đổi sang một font-family khác nhau

Answer 5

Đến giữa năm 2016 động cơ Chromium (v53) hỗ trợ chỉ 3 phong cách nhấn mạnh:

Plain text, đậm, và siêu đậm ...

<div style="font:normal 400 14px Arial;">Testing</div> 

<div style="font:normal 700 14px Arial;">Testing</div> 

<div style="font:normal 800 14px Arial;">Testing</div>