标签: webfonts

我在.htaccess文件中使用以下代码尝试为某些字体设置过期标头,但在检查我的firefox缓存和过期标头后,字体设置为从现在开始大约12小时后到期; 不是我试图设置它的1年.

这是我的代码:

# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg

# Compress compressible fonts
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

# Add a far future Expires header for fonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"

我究竟做错了什么？

我正在查看使用myfonts.com的许可字体的项目的源代码.

css文件包含这个 -

  /* @import must be at top of file, otherwise CSS will not work */
    @import url("//hello.myfonts.net/count/123d4d");

   @font-face {
  font-family: 'SoliPx';
  src: url('webfonts/123D4D_1_0.eot');
  src: url('webfonts/123D4D_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/123D4D_1_0.woff') format('woff'),url('webfonts/123D4D_1_0.ttf') format('truetype');
}

并且如源URL中所述 - 项目的本地webfonts文件夹中有eot,woff,ttf文件.

我知道@ font-face和webfonts一般是如何工作的.

但在上面使用许可/商业字体的情况下,我没有看到在Dev Tools中下载任何字体文件,但文本是使用指定的字体呈现的.

有一个net请求,hello.myfonts.net/count/123d4d状态为200,响应content-type为"text/css",但响应正文中没有任何内容.

内部发生了什么？这是怎么回事？

我已经使用font-squirrel很长一段时间了,并且非常满意它的生成器和@ font-face方法,因为它不会产生任何FOUT.但最近有一个项目用于开发,当我尝试生成时,它给出了一个错误

字体abc.otf被Generator列入黑名单.抱歉

其中abc.otf是font-file.现在客户已购买了该字体的许可证,唯一的问题是在开发时我不知道如何使用该字体.我不想使用Cufon,因为它不支持样式的改变,我需要为悬停文本使用不同的颜色.

我正在寻找一个可以为IE7 + {EOT},firefox和webkit生成@ font-face变种的网站

我的网站与Google webfonts一起使用,直到用户点击网站的SSL部分.

此时,chrome会抛出部分编码错误,而我的cufon菜单会丢失它的字距.

我用这个css包括我的webfont:

@font-face {
src: local('Lusitana'), url(https://themes.googleusercontent.com/static/fonts/lusitana
/v1/tAIvAkRzqMJf8Y4fM1R7PXYhjbSpvc47ee6xR_80Hnw.woff) format('woff');
}

我的js控制台然后给了我这个错误:

[已屏蔽] https://domain.com/ecommerce.php上的网页运行了来自http://fonts.googleapis.com/css?family=Lusitana:regular,700&subset=latin的不安全内容 .

任何想法我如何获得谷歌字体强制SSL？

在我正在使用的新webapp上使用自定义字体时,我遇到了一个奇怪的问题.

这个自定义字体(FF DIN)似乎有一个自然垂直的偏心线高,这迫使我放置一些填充顶部的黑客来补偿元素上的顶部空间,如按钮和输入.

示例:绿色字体(Helvetica Neue)正确对齐,我们使用的自定义字体(FF DIN)垂直偏离中心:

是否有任何已知的方法可以自然地修复CSS上的居中问题,以某种方式强制字体基线行为？

谢谢.

我知道我可以通过html/css导入我的字体,但我想知道这是否是一种可实现的方法.

谢谢!

使用CSS,如果您指定font-family: monospace;,我的理解是浏览器选择其默认/首选等宽字体.

如果这是正确的,您如何确定浏览器使用哪种等宽字体？

我正在使用一些Google Web字体.我听说谷歌处理不同浏览器之间的所有问题,并根据请求标题中的浏览器提供不同的媒体.

我的问题是,它在什么时候这样做？

原因是,对于API,您只需包含一个包含@font-face请求的CSS文件.我可以简单地将CSS包含在我自己的CSS文件中,从而保存HTTP请求,还是根据请求它的浏览器更改CSS？

我真的希望这是有道理的.

例如,Google建议您在CSS文件中包含以下内容:

@import url(http://fonts.googleapis.com/css?family=Exo);

其内容是:

@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 400;
  src: local('Exo Regular'), local('Exo-Regular'), url('http://themes.googleusercontent.com/static/fonts/exo/v1/ZcGd2dvMSgl3mHN3lKAjNw.woff') format('woff');
}

我购买了一个支持一些开放式功能的webfont,当然我想使用它们.
不幸的是,我无法在网上找到解释使用语法的最佳方法 - 在我看来,这font-feature-settings是另一个前缀地狱的例子.

目前我有这样写的但是我不确定它是否涵盖了支持这些功能的所有浏览器.

.element {
    -webkit-font-feature-settings: "kern" 1, "liga" 1, "case" 1;
       -moz-font-feature-settings: "kern=1", "liga=1", "case=1";
       -moz-font-feature-settings: "kern" on, "liga" on, "case" on;
        -ms-font-feature-settings: "kern" 1, "liga" 1, "case";
         -o-font-feature-settings: "kern", "liga", "case";
            font-feature-settings: "kern", "liga", "case";
}

更具体地说,-moz语法似乎很奇怪.一些消息来源声称这是要使用的语法:

-moz-font-feature-settings: "liga=1";  /* Firefox 14 and before */
-moz-font-feature-settings: "liga" on; /* Firefox 15 */

其他人这样做是这样的:

-moz-font-feature-settings: "cswh=1";
-moz-font-feature-settings: "cswh";

同样的事情-webkit; 有人这样写:

-webkit-font-feature-settings: "liga" on, "dlig" on;

而其他人这样做:

-webkit-font-feature-settings: "liga", "dlig";

或者像这样:

-webkit-font-feature-settings: …

我想用谷歌字体添加一个字体,我注意到一个奇怪的行为.

我想添加一个只有拉丁子集的字体,我不想要latin-ext,cyrillic或者cyrillic-ext子集,以减轻代码.我明白这是默认行为,所以我这样做了:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Philosopher">

在Firefox(以及其他不支持WOFF2的浏览器)中,我得到了正确的输出:

@font-face {
    font-family: 'Philosopher';
    font-style: normal;
    font-weight: 400;
    src: local('Philosopher'), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLbrIa-7acMAeDBVuclsi6Gc.woff) format('woff');
}

但在Chrome中,我得到了这个:

/* cyrillic */
@font-face {
    font-family: 'Philosopher';
    font-style: normal;
    font-weight: 400;
    src: local('Philosopher'), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLV4sYYdJg5dU2qzJEVSuta0.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
    font-family: 'Philosopher';
    font-style: normal;
    font-weight: 400;
    src: local('Philosopher'), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLZQV2lvL5Ba9FjAYK6Lx0Qk.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

我想,也许拉丁子集不再是默认行为了,所以我添加了我<link>的subsetGET参数:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Philosopher&subset=latin"> …