Phông chữ web của Google được lưu trữ cục bộ so với nguồn trực tuyến

Question

Khi tôi thêm phông chữ web google bằng cách sử dụng quy tắc @import trong tệp CSS của mình, nó hoạt động tốt.

Nhưng khi tôi tải xuống phông chữ đó và lưu trữ nó cục bộ trong máy chủ của tôi và sau đó hướng quy tắc @ phông chữ vào máy của riêng tôi, nó không hoạt động.

Vì vậy, những gì tôi đã làm là để thay thế dòng này, trong file css/fonts.css tôi:

@import url(http://fonts.googleapis.com/css?family=Michroma); 

với điều này:

@font-face { 
font-family: 'Michroma'; 
font-style: normal; 
font-weight: 400; 
src: url(http://localhost/xampp/mysite/css/fonts/michroma/micrhoma.woff) format('woff'); 
} 

Nói cách khác, tôi chỉ cần sao chép mã từ googleapi cho phông chữ đó. Và tôi đã lưu tệp phông chữ (.woff) trong đường dẫn ở trên (tôi đã kiểm tra lại, nó thực sự ở đó).

tôi đã cố gắng chỉnh sửa url này là tốt, nhưng không tốt:

src: url(fonts/michroma/michroma.woff) format('woff'); 

Tôi không thể tin rằng có bất kỳ lý do tại sao phông chữ trên web của Google sẽ không hoạt động nếu chúng ta sử dụng chúng tại địa phương, do đó phải một cái gì đó sai trái với những gì tôi đang làm. Đầu mối? Đây không phải là cách chúng ta định nghĩa khuôn mặt phông chữ của chúng ta sao? (Tôi chưa bao giờ thử điều đó trước đây).

Answer 1

trong một phông chữ, dấu ngoặc kép cho họ phông chữ là không cần thiết. bạn nên loại bỏ và chạy nó sẽ hoạt động tốt. font-family: Michroma;

Answer 2

Như được nêu trong các nhận xét, nguyên nhân của sự cố là lỗi chính tả của tên phông chữ trong URL.

Đây là cách sử dụng phông chữ của Google cục bộ. Cách thích hợp là sử dụng các URL tương đối như phông chữ/michroma/michroma.woff và không phải http: URL có localhost (chúng sẽ yêu cầu bạn chạy một máy chủ HTTP trên máy tính của bạn).

Tuy nhiên, nó sẽ không hoạt động trên các trình duyệt không hỗ trợ định dạng WOFF (trong trường hợp này). Nói chung, việc sử dụng Google Fonts được lưu trữ từ xa tốt hơn vì họ biết cách phân phát các định dạng phông chữ khác nhau cho các trình duyệt khác nhau. Cf. đến Should I locally store CSS generated by the Google Web Fonts API?