什么是最好的方式来包括自定义字体使用CSS，使其兼容最大的浏览器？ [英] What is the best way to include custom font using CSS to make it compatible with maximum browsers?

问题描述

我尝试了各种代码嵌入自定义字体，最后下面似乎工作在FF& IE8以上。但它不支持在IE7。

  @ font-face {
 font-family：'xyzfont'; 
 src：url（'fonts / abc-font.eot？'）format（'eot'），
 url（'fonts / abc-font.woff'）format（'woff'），
 url（'fonts / abc-font.ttf'）format（'truetype'）; 
} 
 
 h1，h2，h3，div span {font-family：'xyzfont'，Georgia，Arial; } 
  

任何建议使其更兼容（如IE7） b $ b

解决方案

这里是css我用来嵌入我的字体在每个浏览器，希望有帮助：

  @ font-face {
 font-family：'xyzfont'; 
 src：url（'fonts / abc-font.eot'）; / * IE9兼容模式* / 
 src：url（'fonts / abc-font.eot？#iefix'）format（'embedded-opentype'），/ * IE6-IE8 * / 
 url 'fonts / abc-font.woff'）格式（'woff'），/ *现代浏览器* / 
 url（'fonts / abc-font.ttf'）格式（'truetype' Android，iOS * / 
 url（'fonts / abc-font.svg＃svgFontName'）格式（'svg'）/ *旧版iOS * / 
} 
  
 
 
 
另请注意，您可以设置无引号的字体系列，例如：
  h1，h2，h3，div span {font-family：xyzfont，Georgia，Arial; } 
  
您可以了解字体浏览器支持此处。
 
 
 
  fontsquirrel 可能是生成您需要的每种字体格式的最佳位置。
 
 
 
此文章说明如何在SVG字体的主题标签后面找到要添加的字体ID。
 
 
 
如果有人问为什么对于IE6-IE8浏览器eot字体有？＃iefix ，请参阅 answer 。
 
I have tried various codes to embed custom font and finally following seems to work in FF & IE8 above. But it does not support in IE7.
@font-face {
font-family: 'xyzfont';
src: url('fonts/abc-font.eot?') format('eot'), 
     url('fonts/abc-font.woff') format('woff'), 
     url('fonts/abc-font.ttf') format('truetype');
}

h1, h2, h3, div span { font-family: 'xyzfont', Georgia, Arial; }
Any suggestion to make it more compatible (such as IE7) most welcome.
解决方案
Here is the css i use to embed my font in every browser, hope that helps:
@font-face {
font-family: 'xyzfont';
src: url('fonts/abc-font.eot'); /* IE9 Compat Modes */
src: url('fonts/abc-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/abc-font.woff') format('woff'), /* Modern Browsers */
     url('fonts/abc-font.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/abc-font.svg#svgFontName') format('svg') /* Legacy iOS */
}
Also note, that you can set your font family without quote, like this:
h1, h2, h3, div span { font-family: xyzfont, Georgia, Arial; }
You can learn about font browser support here.

fontsquirrel is probably the best place to generate every font format you need.

This article explain how to find your font ID to add after the hashtag for the SVG font.

If someone is asking why is there ?#iefix for IE6-IE8 browsers eot font, see this answer.

                        
这篇关于什么是最好的方式来包括自定义字体使用CSS，使其兼容最大的浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！