Điều chỉnh kích thước phông chữ tùy thuộc vào phông chữ nào được sử dụng từ ngăn xếp phông chữ

Question

Tôi đang sử dụng một trong các phông chữ google api mới cho tiêu đề trên trang web. Đó là Yannone Kaffeesatz và khá là một kiểu chữ đậm đặc.

phông chữ chồng của tôi là như sau:

font-family: 'Yanone Kaffeesatz', arial, serif; 

Điều này là tốt khi font Yannone Kaffeesatz renders, nhưng nếu không, Arial là nhiều cởi mở hơn và tiêu đề trải dài trên hai dòng.

Câu hỏi của tôi là:

Có thể sử dụng phông chữ khác tùy thuộc vào phông chữ được hiển thị trên trang không?

Được hỗ trợ lý tưởng trên nhiều trình duyệt.

Cảm ơn

Tom

Answer 1

Nope, điều này là không thể. Rất phức tạp và khó tìm ra phông chữ được sử dụng thực tế từ danh sách font-family ngay cả trong JavaScript - không thể trong CSS thuần túy.

Nếu bạn muốn đi theo tuyến đường JavaScript, here là một liên kết đến một phương pháp thông minh để phát hiện họ phông chữ thực tế trong JavaScript.

Khi bạn biết phông chữ được sử dụng, thật dễ dàng để điều chỉnh element.style.letterSpacing với số tiền yêu cầu.

Answer 2

Một thuộc tính hơi thay đổi kích thước phông chữ tùy thuộc vào phông chữ là . Đó là CSS3, chỉ được Firefox hỗ trợ.

Nhưng tôi không nghĩ rằng bạn muốn tinh chỉnh kích thước nhiều như tỷ lệ khung hình, khiến Arial thu hẹp. Ép một phông chữ (ví dụ: khoảng cách chữ) trở nên xấu xí nhanh chóng. Thay vào đó, bạn nên bắt đầu với các phông chữ đậm đặc hơn trong ngăn xếp của bạn.

http://pieroxy.net/blog/2014/10/11/the_quest_for_a_condensed_web_font.html nghiên cứu chi tiết về tùy chọn phông chữ chi tiết. Một trong những phát hiện phức tạp hơn là font-stretch: condensed, ví dụ: giúp truy cập ví dụ: Arial Thu hẹp trên cửa sổ (có Office).