Phông chữ giống như Metro để sử dụng trang web

Question

Bạn sẽ tư vấn cho font nào (miễn phí cho mục đích thương mại) cho một trang web được tạo kiểu như Metro Windows 8? Sẽ tốt nhất nếu đó là trên Google Fonts, v.v.

Answer 1

Nếu bạn muốn chính xác như metro, bạn có thể sử dụng http://www.fontsquirrel.com/ và tải lên phông chữ.

LƯU Ý: Đảm bảo bạn có giấy phép cho phông chữ nếu sử dụng fontsquirrel, như được đề cập trong nhận xét.

Nếu không, có thể Helvetica hoặc Arial. Đó là những phông chữ web an toàn mà tôi có thể nghĩ đến.

Phông chữ metro mới là phông chữ Sans Serif và Arial luôn là phông chữ Sans Serif có liên quan chặt chẽ nhất với Windows.

Ngoài ra tôi đang sử dụng phông chữ google này với biểu trưng phông chữ metro và tôi cảm thấy chúng khá giống nhau.

<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400' rel='stylesheet" type="text/css"> 

Ngoài ra, hãy kiểm tra trang web của Microsoft. Họ đang sử dụng họ phông chữ này .. font-family: segoe ui, verdana, arial, sans-serif;

http://windows.microsoft.com/en-US/windows/home

Cũng Kiểm tra bài này, có vẻ là rất giống nhau. https://superuser.com/questions/336031/what-font-is-used-on-windows-8-or-windows-phone-7

Answer 2

Phông chữ được sử dụng với thương hiệu 'Metro' là Segoe UI. Thật không may, như những người khác đã đề cập, nó không có sẵn như là một tải về miễn phí.

Mặc dù, ngay cả khi bạn tình cờ có Segoe, những người dùng khác của ứng dụng web của bạn có thể không. Do đó, để nó hiển thị nhất quán với người dùng của bạn, bạn cần phải @font-face nó. Nhưng, than ôi, do cấp phép, nó sẽ trái với pháp luật để chỉ đơn giản là lưu trữ nó trên máy chủ của bạn và phông chữ mặt nó. Cách hợp pháp duy nhất để sử dụng giao diện người dùng Segoe là purchase a license để sử dụng nó.

Nhưng bạn muốn có tùy chọn miễn phí, vì vậy hãy xem xét một số hình dạng giống Segoe.

Giao diện người dùng Segoe cực kỳ giống với Frutiger - tương tự, trên thực tế, rằng Microsoft was taken to court by Linotype over it - nhưng, tất nhiên, phông chữ đó cũng không miễn phí.

Nếu bạn đặc biệt muốn sử dụng phông chữ của Google, phổ biến Open Sans có thể là đặt cược tốt nhất của bạn, mặc dù có một vài sự khác biệt đáng chú ý giữa nó và Segoe.

Bạn có thể có nhiều may mắn hơn khi tìm phông chữ mà không phải tất cả những gì nổi tiếng nhưng được lấy cảm hứng từ những người nổi tiếng, đắt tiền (một số có thể gọi họ là không biết xấu hổ). Hai ví dụ là CartoGothic Std và WeblySleek UI. Đối với hầu hết người dùng, bạn sẽ thấy rằng sự khác biệt giữa các phông chữ này là không thể nhận thấy. Và bạn may mắn, vì, tại thời điểm viết bài này, bạn sẽ tự do lưu trữ các phông chữ này để cung cấp chúng thông qua @font-face (Tuyên bố từ chối trách nhiệm: Tôi khuyên bạn nên đọc giấy phép để biết chi tiết trước khi thực hiện việc này. có thể thay đổi).

Bạn muốn so sánh nhanh? Dưới đây là một số hình ảnh, như được hiển thị trong Photoshop trên OSX. Kích thước phông chữ là khoảng 10pt. Và tất cả chúng đều được đặt bình thường hoặc đặt trọng lượng.

Như bạn có thể thấy, sự khác biệt lớn nhất giữa ba phông chữ đầu tiên và Open Sans là chữ thường g. Tôi chắc chắn có nhiều sự khác biệt giữa các chữ hoa và tôi khuyến khích bạn khám phá những chi tiết đó.

Segoe UI

Segoe UI http://jmeas.com/stackoverflow/segoe.jpg

Frutiger

Segoe UI http://jmeas.com/stackoverflow/frutiger.jpg

CartoGothic STD

Cartogothic STD http://jmeas.com/stackoverflow/cartogothic.jpg

WeblySleek UI

Cartogothic STD http://so.jmeas.com/weblysleek.jpg

Open Sans

Open Sans http://jmeas.com/stackoverflow/open-sans.jpg

Tôi hy vọng một trong những phù hợp với nhu cầu của bạn.