Câu hỏi Sự cố phông chữ Semibold của trình duyệt chéo


Tôi đang sử dụng phông chữ "Signika" cho ứng dụng web của tôi. Thiết kế được cung cấp trong các tệp Adobe Illustrator nơi chúng đã sử dụng phông chữ "Signika Semibold".

Phương thức đầu tiên:

Tôi áp dụng font-family: Signika Semibold nhưng nó hoạt động như bán đậm chỉ trên Chrome. Firefox và IE hiển thị văn bản có trọng lượng phông chữ bình thường.

JS Fiddle

HTML

<p class="semi">
  Abcd Efgh
</p>    

CSS

.semi{
  font-family:'Signika Semibold';
  font-size:14px;
}

Phương pháp thứ hai:

Tôi áp dụng font-family: Signika Và cho font-weight: 500 cho semibold. Tuy nhiên nó xuất hiện như Dũng cảm thay vì Semibold trên Chrome.

JS Fiddle

HTML

<p class="weight">
  Abcd Efgh
</p>    

CSS

.weight{
  font-family:'Signika';
  font-weight:500;
  font-size:14px;
}

Có giải pháp khắc phục sự cố này không?


13
2018-06-30 07:10


gốc


Fiddle của bạn không bao gồm tham chiếu đến phông chữ thực tế, nhưng một cách khá an toàn để đảm bảo phông chữ thực sự được tải trong mỗi trình duyệt là kiểm tra thống kê mạng / bảng điều khiển cho phông chữ CSS được áp dụng - nó sẽ làm rõ hơn kiểu nào được áp dụng so với các công cụ hiển thị / dự phòng khác nhau của mỗi trình duyệt. - Paracetamol


Các câu trả lời:


Một số ảnh chụp màn hình sẽ tuyệt vời. Phông chữ có xu hướng xuất hiện nặng hơn trong trình duyệt Webkit vì chúng sử dụng sub-pixel antialiasing để làm mịn phông chữ. Thử cài đặt -webkit-font-smoothing: antialiased; và nó sẽ bắt đầu trông giống như nó trông như thế nào trong các trình duyệt khác.

Hãy xem điều này trang để biết thêm chi tiết.

Có một thông báo trước khi sử dụng điều này: Thông thường, bạn nên để trình duyệt xử lý việc này. Bạn sẽ nhận thấy rằng trang MDN đề cập đến đây là một tính năng không chuẩn.

Nếu bạn quan tâm đến cách các kỹ thuật làm mịn khác nhau này tạo ra các kết quả đầu ra khác nhau, kiểm tra điều này.


8
2018-06-30 07:25





DUNG DỊCH

Sử dụng phông chữ google với các kiểu được yêu cầu: Bình thường (400), bán đậm (600), đậm (700))

Liên kết của Google Font

Đã nhập phông chữ bằng cách đưa mã này vào phần HEAD của HTML

<link href='https://fonts.googleapis.com/css?family=Signika:700,400,600' rel='stylesheet' type='text/css'>

Sau đó, trong CSS,

Đối với bình thường

font-weight:400;

Dành cho bán đậm

font-weight:600;

Dành cho chữ đậm

font-weight:700;

Bằng cách sử dụng phương pháp này, phông chữ trên tất cả các trình duyệt trông giống nhau.


3
2018-06-30 09:58





Trên thực tế, JSFiddle thứ hai của bạn có:

font-weight: 600;

Thay vì 500. Đây là fiddle của bạn cập nhật.

http://jsfiddle.net/gbj7b1jp/1/

Bây giờ nó không đậm.


1
2018-06-30 07:18



Chào. Cảm ơn. Nhưng 500 không giống nhau trên tất cả các trình duyệt. Đó là hướng tới đậm hơn về chrome hơn là trên Firefox và IE. Đó là vấn đề. - Alekh Shah
@AlekhShah các trình duyệt khác nhau có thể có tính năng làm mịn phông chữ khác nhau có thể dẫn đến chênh lệch trọng lượng phông chữ trực quan tinh tế. Nói cách khác, nó có thể là cùng một trọng lượng phông chữ trên cả hai trình duyệt, nhưng do cách một trình duyệt làm mịn phông chữ so với các trình duyệt khác, nó có thể trông táo bạo hơn trong một trình duyệt so với trình duyệt khác. - DA.


Semibold usaly là font-weight:400;

Tuy nhiên Bạn quét chỉ định thuộc tính phông chữ của bạn khi nhập phông chữ với @font-face:

@font-face {
    font-family: Signika;
    src: url(SignikaLight.otf);
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: Signika;
    src: url(SignikaRegular.otf);
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: Signika;
    src: url(SignikaSemibold.otf);
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: Signika;
    src: url(SignikaBold.otf);
    font-style: normal;
    font-weight: 600;
}

1
2018-06-30 07:22





Đây là một vấn đề đã biết trong CSS. Các trình duyệt web đã nghèo khi triển khai các 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ừ in đậ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. Bạn có thể có một cái nhìn về liên kết này (chỉ chạy trong IE) và xác định phù hợp nhất của kiểu phông chữ từ danh sách là hack dễ dàng cho vấn đề này. http://www.cs.tut.fi/~jkorpela/listfonts.html


1
2018-06-30 08:21