标签: webfonts

在CSS3 font-face,有多个字体类型包括等ttf,eot,woff,svg和cff.

我们为什么要使用所有这些类型？

如果它们对于不同的浏览器是特殊的,为什么它们的数量大于主要Web浏览器的数量？

将Google Web Fonts包含在页面中的首选方法是什么？

1. 通过链接标签？

   <link href='http://fonts.googleapis.com/css?family=Judson:400,400italic,700' rel='stylesheet' type='text/css'>

2. 通过样式表中的导入？

   @import url(http://fonts.googleapis.com/css?family=Kameron:400,700);

3. 或使用网络字体加载器

   https://developers.google.com/webfonts/docs/webfont_loader

我没有使用flash或php - 我被要求将自定义字体添加到简单的HTML布局中."KG June Bug"

我在本地下载它 - 有一个简单的CSS技巧来完成这个吗？

我喜欢Font Awesome图标字体,并希望将其用于我网站上的大多数图标,但除了提供的内容之外,还有一些我需要的自定义svg图标.

我注意到Font Awesome的.svg版本主要由以下<glyph />元素组成:

...
<glyph unicode="&#xf0b2;" horiz-adv-x="1536" d="M0 80v477q0 51 24.5 61.5t59.5 -24.5l162 -162l340 338l-338 338l-164 -164q-35 -35 -59.5 -25.5t-24.5 60.5v477q0 31 23 57q27 23 57 23h477q51 0 61.5 -24.5t-24.5 -59.5l-160 -158l338 -338l332 334l-162 162q-35 35 -24.5 59.5t61.5 24.5h477q33 0 55 -23 q25 -25 25 -57v-477q0 -51 -24.5 -61.5t-59.5 24.5l-162 162l-334 -334l338 -336l158 160q35 35 59.5 24.5t24.5 -61.5v-477q0 -35 -25 -55q-23 -25 -55 -25h-477q-51 0 -61.5 24.5t24.5 59.5l166 166l-336 336l-340 …

我在我的网站上嵌入了一些自定义的webfonts,我使用的东西就像

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

设置渲染输出的样式.这在Safari和Chrome中运行良好.我得到更清晰的边缘和更细的线条.

在Firefox中有没有办法做这样的事情？还是歌剧？

我对应用于网络字体的法律有点困惑.我知道使用Arial,Times Romans,Georgia等字体是可以的......我认为使用其他商业字体是违法的.有网站提供免费字体吗？如果有.

我可以直接使用它们而不提及免费字体的创建者或不链接我下载它们的页面吗？或者我必须？

如果我不允许以数字形式重新分发它们,我怎么能在网上使用字体？

自从使用Cufon带来的麻烦以来,我冒险使用外部字体资源,但是最近,我一直在寻找替代方法来加载字体以查看是否有更好的方法; 更好的方法有一种突然出现的方式.

那里有很多新的方法,并且每种方法看起来都有变化; 我应该使用typekit吗？或google webfonts(使用js或css)？我应该继续使用本地加载字体(例如fontsquirrel.com生成的方法)吗？

我将列出下面看起来最受欢迎的方法,并进行一些测试,但它真的值得转向webfont吗？它似乎会带来更高的资源负载(http请求)并且文件格式类型较少(兼容性较差)等.但在大多数情况下,看起来像文件是异步和高效加载的.

1. 这只是一个情况和需要的问题吗？如果是这样,他们是什么？
2. 这些方法之间是否存在巨大差异？
3. 我还没有列出更好的方法吗？
4. 性能方面的专业人士/骗子是什么？看？依赖呢？兼容性？

我真的在这里寻找最佳实践,性能是一件大事,但可扩展性和易用性也是如此.更不用说,外观和感觉.

谷歌CSS

• 仅使用外部样式表
• 仅使用最小的兼容文件类型
• 可以使用@import或者<link>获取styleshee(@font-face)的内容并将其直接放入您自己的样式表中.

检测结果

  78ms load of html
  36ms load of css

Run Code Online (Sandbox Code Playgroud)

Google JS方法

• 用于webfont.js加载styleshet
• 仅使用最小的兼容文件类型
• :root用类附加元素
• 将脚本添加到头部.

检测结果

    171ms load of html
    176ms load of js
    32ms load of css

Run Code Online (Sandbox Code Playgroud)

Typekit方法

• :root用类附加元素.
• 可以使用*.js代码段或外部加载的文件*.js文件
• 使用data:font/opentype而不是字体文件.
• 将脚本添加到头部
• 将嵌入式css添加到头部

• 将外部样式表添加到头部

  您可以从typekit.com轻松添加/删除/调整字体和目标选择器

检测结果

  169ms load of html
  213ms load …

Run Code Online (Sandbox Code Playgroud)

网上有很多文章如下:http://www.fontspring.com/blog/fixing-ie9-font-face-problems建议添加?#iefix到eot网址.我很想知道如何解决这个问题.谢谢.

我一直在开发一个使用Google Fonts API的网站.它很棒,据说已经在IE中测试过,但是在IE 8中进行测试时,字体根本就没有被设计样式.

我按照Google的指示包含了字体,因此:

<link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light"  
 rel="stylesheet" type="text/css" />

并在CSS中将其名称添加到字体系列的前面:

body {
font-family: "Josefin Sans Std Light", "Times New Roman", Times, serif;
font-size: 16px;
overflow-y: scroll;
overflow-x: hidden;
color: #05121F;
}

Run Code Online (Sandbox Code Playgroud)

就像Chrome,Firefox,Safari中的魅力一样.IE 8中没有骰子.任何人都知道为什么？

我怎样才能@font-face在CSS中使用超过规则？

我已将其插入到样式表中:

body {
    background: #fff url(../images/body-bg-corporate.gif) repeat-x;
    padding-bottom: 10px;
    font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}

@font-face {
    font-family: 'GestaReFogular';
    src: url('gestareg-webfont.eot');
    src: local('?'),
         url('gestareg-webfont.woff') format('woff'),
         url('gestareg-webfont.ttf') format('truetype'),
         url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}

这目前仅适用于网站上的整个文本.但是,我想指定h1使用不同的字体.我怎样才能做到这一点？