Tuyên bố miễn trừ trách nhiệm:
Tôi nhận thấy không có một "công thức" hoàn hảo cho câu hỏi này. Tôi đang tìm kiếm thực hành làm việc kinh nghiệm của bạn. Nếu bạn không có, tôi sẽ không chống lại bạn.

Trong vài năm qua, webfont cuối cùng đã trở thành xu hướng! Hỗ trợ trình duyệt là đủ tốt và thị trường đã mở rộng đến mức các nhà thiết kế có một loạt các khả năng tuyệt vời.

Đối với các khách hàng tập trung vào hiệu suất của tôi bằng cách sử dụng webfonts có một số lợi ích tốt ngoài hình ảnh / thương hiệu: Việc loại hình ảnh giúp nén hình ảnh lớn hơn có thể và cập nhật nội dung và kiểu nhanh hơn nhiều.

Câu hỏi ngày hôm nay là:
Tại thời điểm nào bạn thực hiện việc chuyển từ văn bản html trực tiếp sang đồ họa? Đặc biệt là trong bối cảnh của một trang web có yêu cầu hiệu suất cao (tải lưu lượng truy cập, logic và tải tài sản của bên thứ ba). Bây giờ tôi đang đi bộ trong một vài dự án và có một thời gian khó khăn để quyết định trong một số trường hợp. Tôi đang tự hỏi những gì công thức người khác đã đưa ra. Nếu có.

Chúng ta cần cân bằng một số yếu tố (tôi biết còn nhiều yếu tố khác):

• Toàn vẹn kiểu chữ
• Yêu cầu tài sản được thực hiện cho máy chủ
• SEO và khả năng truy cập
• Thiết kế đáp ứng (nếu có)

Các vấn đề phức tạp , kết xuất vẫn thay đổi rộng rãi bởi trình duyệt và HĐH . So sánh IE 8 đến 9, ví dụ, hoặc mạnh hơn, OS X với Windows. Rõ ràng, thị trường của bạn có thể phủ nhận mối quan tâm đối với một số vấn đề đó (tôi không may vẫn hỗ trợ trở lại IE7 theo cách lớn đối với một số dự án). Và mặc dù hỗ trợ tính năng OpenType của webfont khá tốt trong Firefox, nhưng nó vẫn bị tụt lại trong hầu hết các ứng dụng khác.

Giải pháp của tôi: tấm sprite SVG với dự phòng PNG

Cá nhân, tôi nghĩ rằng phông chữ biểu tượng là một công nghệ khoảng cách nghèo nàn sẽ không tồn tại trong 5 năm. Hình ảnh SVG là một cách tốt hơn để đi nếu bạn cần vectơ. SVG có hầu hết các lợi ích của phông chữ biểu tượng, cộng với:

• SVG có thể chứa màu sắc, độ dốc và các hiệu ứng khác.
• Hoạt động với imgcác thẻ.
• Hoạt động như CSS background-images.
• SVG là pixel hoàn hảo.
• Giống như phông chữ biểu tượng, SVG có thể mở rộng theo bất kỳ kích thước nào, do đó bạn nhận được hỗ trợ Retina miễn phí.
• Các SVG thường là các tệp nhỏ hơn phông chữ biểu tượng.
• Nếu bạn muốn mọi thứ trong một tệp, bạn có thể sử dụng các tấm sprite SVG.
• Các SVG dễ tạo hơn và có thể được chỉnh sửa trong Illustrator.
• Kết xuất là nhất quán hơn nhiều trên các trình duyệt (chắc chắn cho những điều đơn giản dù sao).

Sự cảnh báo lớn cho việc sử dụng SVG? Không hỗ trợ cho Internet Explorer trước phiên bản 9. Điều đó có thể hoặc không thể là một công cụ giải quyết cho bạn. WebKit (Safari và Chrome) và Firefox có hỗ trợ SVG tuyệt vời. Đối với các phiên bản cũ hơn của Internet Explorer, bạn có thể hoán đổi trang sprite SVG của mình thành PNG (siêu dễ, thường chỉ một vài dòng CSS).

Điều đó sẽ bao gồm mọi thứ và chỉ cung cấp cho bạn một vài yêu cầu HTTP, kích thước tệp nhỏ, khả năng sử dụng màu sắc, độ dốc và các hiệu ứng thiết kế khác. Ồ, và điều đó có nghĩa là bạn không cần phải dùng đến tin tặc HTML khủng khiếp. Mọi thứ có thể tốt đẹp và ngữ nghĩa.

Không có nhiều tình huống tôi muốn giới thiệu phông chữ biểu tượng. Tôi nghĩ rằng chúng là một ý tưởng khủng khiếp. Một khoảng trống thực sự hacky sẽ chết và bị chôn vùi tại một thời điểm nào đó trong tương lai gần.

Bạn tự đề cập đến nó: "Vấn đề cơ bản ở đây là duy trì sự cân bằng giữa hình ảnh và kỹ thuật". Đây là ý kiến ​​của tôi và tôi chắc chắn không phải ai cũng đồng ý, nhưng đây là những gì tôi đã quan sát thấy trong những năm qua làm việc trên web.

Phông chữ web và phông chữ an toàn: Về mặt kỹ thuật, bạn không cần webfont. Bạn có thể sử dụng những cái an toàn không yêu cầu người dùng tải xuống bất kỳ tệp bổ sung (yêu cầu) nào. Bạn có thể thực hiện tuyệt vời kết hợp kích thước, trọng lượng, khoảng cách chữ và chiều cao dòng, và có thể truyền đạt thành công thông điệp của bạn với họ. Sử dụng một phông chữ khác trong trường hợp này có lẽ chỉ là một lựa chọn thẩm mỹ.

Văn bản HTML so với đồ họa: Tôi không nghĩ có một công thức cho cái này. Khi phông chữ web trở nên cực kỳ phổ biến, mọi người đều nhảy vào tàu mặt phông chữ bất kể một số phông chữ trông khủng khiếp như thế nào trên các trình duyệt / hệ điều hành nhất định. Nhắc nhở tôi một chút về cách mọi người quay lưng lại với bàn, và đột nhiên bất cứ ai sử dụng chúng đều báng bổ. Bảng vẫn là lựa chọn tốt nhất cho dữ liệu dạng bảng. Đồ họa Pixel hoàn hảo vẫn là, theo tôi, sự lựa chọn tốt nhất cho các thiết kế thẩm mỹ.

Điều này có thể sẽ thay đổi trong tương lai gần, mặc dù. Kết xuất di động là tuyệt vời và một số phông chữ mới trông tuyệt vời trên các thiết bị khác nhau.

Lần trước tôi muốn 'tùy chỉnh', tôi đã thử hầu hết các sans-serif trong sóc sóc phông chữ trong 3 hệ điều hành khác nhau và tất cả các trình duyệt chính. Tôi đã cho mỗi người một điểm từ 1 đến 5 dựa trên mức độ họ thể hiện độc đáo. Hầu hết trong số họ có 3, một số ít có 4. Đối với một trang web cá nhân, tôi đã sử dụng một nửa phông chữ đồ họa. Giống như DA01 đề cập, "tất cả phụ thuộc vào nhu cầu của khách hàng, nhu cầu của người dùng của khách hàng và giải pháp cụ thể được thiết kế" (DA01 sic).

Đã nhiều năm kể từ khi 'ra mắt' phông chữ @ và tôi rất thích sử dụng các phông chữ đẹp trong các thiết kế của mình, tôi vẫn không thấy quan điểm của việc sử dụng các phông chữ hiển thị quá khác nhau trong các tình huống khác nhau. Nhưng đây chỉ là ý kiến ​​khiêm tốn của tôi và tôi có xu hướng gắn bó với 'những gì phù hợp với tôi'. Câu trả lời SVG nghe có vẻ hay và có thể thay đổi quan điểm của tôi :)

Được rồi, tôi sẽ cân nhắc với nơi tôi đang ở, vì dường như không có bất kỳ phương pháp cố định nào xuất hiện.

Kết xuất

Đối với người mới bắt đầu, những ngày kết xuất webfont sơ sài sẽ hoàn toàn ở phía sau chúng ta, ít nhất là với các phông chữ được làm tốt. Những người phạm tội chính (phiên bản IE trước 9) đang nhanh chóng trở thành quá khứ. IE 8 vẫn là một người chơi nhưng tôi tin rằng khán giả không phải là một người có động lực thẩm mỹ dù sao;)

Hiệu ứng lạ mắt

Văn bản hệ thống / HTML có thể dễ dàng xử lý các thay đổi về
màu sắc,
độ mờ,
tỷ lệ, định vị
ngang và dọc
và bóng văn bản.

Khi hiệu ứng của tôi bắt đầu trở nên phức tạp, tôi coi đó là một khoảnh khắc đồ họa rõ ràng. Ngoài các điều khiển kiểu đơn giản (có ai muốn thêm vào danh sách của tôi không?), Bạn sẽ cần phải dựa vào
các thư viện javascript,
các tính năng OpenType với sự hỗ trợ tại chỗ,
tải xuống webfont quá lớn ở đầu người dùng
và có thể là các tính năng HTML5 / CSS3 với sự hỗ trợ hạn chế.

Nếu tôi muốn làm lệch kiểu của mình,
tinh chỉnh kiểu chữ,
áp dụng họa tiết,
vị trí chính xác và đường thẳng phá vỡ nó trên một hình ảnh,
hoặc bất cứ thứ gì khác cần điều khiển chính xác, tôi dùng đến một hình ảnh.
Như tôi đã nói, có nhiều cách, tôi chỉ không nghĩ rằng chúng đáng giá vào thời điểm này.

Như đã nói, tôi cũng phải tự hỏi mình trong những trường hợp đó nếu tôi thực sự cần các hiệu ứng. Có thể thiết lập kiểu hệ thống độc đáo mà không cần tất cả các công cụ ưa thích làm công việc. Có lẽ. Luôn có một đường mờ ở đâu đó.

Thứ lớn

Nơi tôi thấy mình do dự khi tin tưởng webfonts là loại rất lớn. Chỉ cần bỏ ra một số, hãy nói 60px trở lên. Tại sao vậy? Tôi không hoàn toàn chắc chắn nhưng tôi có thể nghĩ về một vài điều hơn là quan tâm đến tôi.

Đối với một, loại lớn thường đòi hỏi thêm một chút tinh vi mà theo dõi đơn giản không thể giải quyết. Loại này chiếm ưu thế trên trang và mọi lỗ hổng nhỏ đều trở nên rõ ràng với tôi.

Thứ hai, loại lớn có xu hướng yêu cầu đồ đạc rất cẩn thận trong thiết kế. Tôi nghĩ rằng nó ít quan trọng hơn trên các trang web nội dung nơi loại có thể chảy và có một số khoảng trắng rất cần thiết nhưng trên một trang web thương mại hoặc trong một môi trường nội dung dày đặc, việc ngắt dòng hoặc mở rộng ký tự sai có thể tàn phá.

Tôi nghĩ rằng đây có thể chỉ là những bất an còn sót lại từ thời mà các trình duyệt đã làm một công việc thực sự tồi tệ với loại hình. Thật không may, đủ những vấn đề đó vẫn còn kéo dài khiến nó phải thận trọng. Những thứ như nút Addner của Giantnerd khiến tôi muốn nắm lấy nó :)

Phán quyết cuối cùng

Vâng, có lẽ không phải là cuối cùng. Cuối cùng

Bất chấp sự không an toàn của tôi, tôi đang vượt qua điều lớn. Và tôi thấy mình sử dụng ít hiệu ứng hơn và văn bản hệ thống sạch hơn ở nơi khác. Một trong những lợi ích lớn là bố cục phản ứng nhanh hơn: Văn bản hệ thống dễ dàng thay đổi nhanh chóng!

Tôi đang nhanh chóng hợp lý hóa các trang web khách hàng của mình và chuyển sang phụ thuộc hình ảnh ít hơn. Đưa lên webfonts! Có lẽ đó sẽ là một giai đoạn hồi sinh Phong cách Quốc tế khác trong thiết kế;)

Công bố đầy đủ

Tôi sẽ cảm thấy hối hận khi không đề cập đến những cuộc triển lãm tuyệt vời như Hội chợ Thế giới đã mất . Đó là bằng chứng tuyệt vời rằng mọi thứ đều có thể có thời gian và cơ sở người dùng phù hợp.