标签: webfonts

我希望在Chrome扩展程序中使用标准字体以外的其他内容.我对使用Google Web Fonts的可能性感到兴奋,但是当您的扩展程序使用它时,似乎会因在网络上传输Web字体而受到惩罚,从而影响我的扩展程序的性能.我是否可以选择使用我的扩展程序打包字体,该字体适用于所有Chrome支持的平台(Windows/Mac /等)？提前致谢

由于某种原因,字体已停止在我的网站上呈现.字体存储在本地,与站点位于同一服务器上.

我查了一下这个问题似乎是一个Missing Cross-Origin Resource Sharing (CORS) Response Header但是我无法理解这个问题的解决方案.

所有各种网站都说要做的就是使用: Access-Control-Allow-Origin:*

但由于我主要是前端,我不知道该放在哪里.这是我的主人可以帮助的东西吗？

我该怎么做才能解决这个问题？

编辑:

有问题的网站是:http://cyclistinsuranceaustralia.com.au/

例如,右上角的电话号码应为Bebas字体,但默认为Impact.

在控制台中,我得到错误:

来自" http://www.cyclistinsuranceaustralia.com.au "的字体已被跨源资源共享策略阻止加载:"Access-Control-Allow-Origin"标题的值为" http:// www. cyclistinsuranceaustralia.com.au '不等于提供的原产地.因此,不允许来源" http://cyclistinsuranceaustralia.com.au "访问.

我联系我的主持人说:

Access-Control-Allow-Origin "http://www.cyclistinsuranceaustralia.com.au"

在我的.htaccess文件中,但这没有变化.

据一位消息人士透露,这就是我使用Fontello字体的方式:

现在,根据您的需求制作自定义图标webfont是微不足道的.首先,选择您喜欢的图标.然后更新字形代码(可选),并下载您的webfont包.Fontello生成您需要的一切,然后通过此模块的配置页面上传捆绑包!就这么简单!

好的.怎么办？如何在我的网页上调用其中一个图标？

我正在尝试确定Internet Explorer上支持TTF字体格式的状态.(我手边没有任何Windows机器可以试用.)caniuse的表中说明从版本9开始的IE支持TTF,但"只有在[字体]设置为可安装时才能工作".那是什么意思？该页面链接到MSDN上的博客文章,该文章描述了IE9上的更新字体支持.它不是很清楚或明确; 我认为所谓的"原始字体"意味着ttf和otf.它说"支持的字体格式包括......嵌入权限设置为可安装的原始字体"

所以,总结一下:

• IE是否支持ttf字体？
• 如果存在ttf支持,它在IE9,IE10和IE11之间是否有所不同？
• "嵌入权限设置为可安装"的含义是指ttf字体？

可能重复:
@ font-face无法在客户端站点上运行？

我在ASP.Net MVC Web应用程序中的此文件夹结构中有以下字体文件:

-[根]

| - 公开

|| --fonts

||| --NuvoWeb-Medi.eot

||| --NuvoWeb-Medi.woff

在我的CSS文件中,我有以下字体声明:

@font-face 
{
    font-family: NuvoWeb;
    src: url(/Public/fonts/NuvoWeb-Medi.eot);
}
@font-face 
{
    font-family: NuvoWeb;
    src: url(/Public/fonts/NuvoWeb-Medi.woff) format('woff');
}

但是,当我运行应用程序时,Firebug会返回以下错误:

"NetworkError:404 Not Found - http:// localhost:60194/Public/fonts/NuvoWeb-Medi.woff "

请告知我缺少什么,以使其工作.

我创建了一个小提琴试图使用font-weight 300的Open Sans字体:

HTML

<span class="demo">example</span>

CSS

.demo {
  font-weight: 400 !important;
  font-family: 'Open Sans' !important;
  font-style: normal;
  font-variant: normal;
}

我使用谷歌字体来定义CSS

我可以看到Firefox(Ubuntu 13.10)在font-weight:300(轻量级)和font-weight:400(正常)下渲染时的差异,但在Chrome(版本33.0.1750.117)中没有,其中所有内容看起来都是在渲染时字体重量:400.我做错了什么或Chrome中有错误吗？有没有已知的解决方法？

更新:

Chrome肯定存在问题我在Chrome中的2个不同窗口中打开了同一页面的两个实例.一种是使字体呈现正常(300重量对应于光变体)而一种不是(300重量与正常变体相同).有线索吗？我确保刷新每个标签页面,使它们实际上是同一页面.

更新2:附上截图:错误:

更新3 这是不是重复的这个.在那个问题中,问题是"Arial Black"和"Arial"实际上是不同的字体.在我的情况下,Open Sans是唯一的字体,问题是Chrome有时会收到不正确的重量.从截图中可以看出,Chrome与两个实例之间渲染的字体不一致.

除非您使用SVG字体,否则Windows上的Chrome浏览器中的font-face渲染非常糟糕.但是,谷歌网络字体优先考虑WOFF文件.

有没有办法强制它提供SVG字体或我是否必须自己手动托管字体？

我注意到在使用网络字体时,他们最初可能需要一秒钟才会出现; 就像你创建一个下拉导航菜单一样,当你第一次将鼠标悬停在菜单上时,整个菜单将只显示背景颜色一秒钟,然后会出现文本.

这不是很理想,它让我相信在加载CSS文件时不会下载webfonts,而是当你第一次在页面上查看它们时.

但另一方面,我已经在我的电脑上安装了字体,因此不需要下载它们,因此提出了他们为什么要这样做的问题!？

这是我用来加载我的webfonts的CSS:

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Italic-webfont.eot');
    src: url('../fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Italic-webfont.woff') format('woff'),
         url('../fonts/Roboto-Italic-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold-webfont.eot');
    src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light-webfont.eot');
    src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Light-webfont.woff') format('woff'),
         url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg'); …

FontAwesome在其CSS文件中指定字形,如下所示:

/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure 
    screen readers do not read off random characters that represent icons */
.icon-glass:before                { content: "\f000"; }
.icon-music:before                { content: "\f001"; }

我试图将图标从此字体渲染到画布元素,但无法看到如何访问这些字形.

ctx.font = "40px FontAwesome";
ctx.fillText("\f000",20,20); // no cigar

如何在JavaScript字符串中指定这些字形？

所以我在一个项目中使用Font Awesome,在测试中我遇到了IE8的问题.

在Windows IE9上,Chrome和Firefox正确显示字体(OS X上的Firefox,Chrome和Safari),但Windows上的IE8有一个问题,我得到一个方框代替字体.

我的代码是:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <title>Site title</title>

    <!--[if lt IE 9]>
        <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link href=".../css/css.css" rel="stylesheet" type="text/css">
    <link href="../css/print.css" rel="stylesheet" type="text/css" media="print">

    <link href="../apple-touch-icon.png" rel="apple-touch-icon-precomposed">
    <link href="../css/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css">
    <link href="../css/jquery-ui-overrider.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato|Michroma&subset=latin&v2" rel="stylesheet" type="text/css">
    <link href="../css/prettify.css" …