标签: webfonts

我遇到了fontsquirrel webfont生成器的问题.输出字体文件中不存在两个特殊的匈牙利字符(ő,ű),而输入文件则不存在.另一方面,我找不到任何设置(如在Cufon中),设置应该或不应该包含哪些字符.一些建议？字体是'Aller',BTW.
谢谢你的帮助.

我想line-height为列表后备字体设置不同的字体.例如:

body {
    font-family: "Small x-height font", "Larger x-height font", sans-serif;
}

当使用首选的小x高度字体时,我想设置line-height为1.3.当使用较大的x高度字体,因为首选字体不可用时,我想设置line-height为1.5.当两种字体都不可用并且使用sans-serif后备时,我想设置line-height为normal.

这可能使用CSS 2.1或CSS 3而不诉诸JavaScript吗？

基本原理问题是不同的字体具有不同的x高度(小写字母的高度,例如x相对于字体大小).要使具有较大x高度的文本看起来很好,必须使用较大的线高设置.默认字体的x高度(上例中的sans-serif)是未知的,可能与我们选择的字体的x高度有很大不同.因此,当字体加载失败时,使用我们的字体看起来很好的行高可能看起来很难看.

custom使用webfont加载器定义字体(这里是repo)时,我们基本上定义了加载的族和相关的URL:

WebFont.load({
    custom: {
        families : [ "My font" ],
        urls     : [ "assets/css/fonts.css" ]
    }
});

但是,似乎加载程序没有检测weight到css文件中相同字体的多个定义:

@font-face {
  font-family: 'My font';
  src: url("../fonts/my-font.eot");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'My font';
  src: url("../fonts/my-font.eot");
  font-weight: bold;
  font-style: normal;
}

因此,加载程序在加载active第一个字体时触发事件.如果我们检查fontactive一次只触发一次的事件,就可以确认这一点:

WebFont.load({
    fontactive: function( fontname, fontdescription ) {
        console.log( fontname, fontdescription );
        // Only trigger once `My font, n4`
    }
});

那么,有没有办法告诉webfont加载器有多个权重(有点像他们的谷歌webfonts界面)？

(修复可以是为每个字体权重使用多个名称,但这不是我在这里搜索的解决方案)

我设法使用自定义字体,该字体适用于每个值得称为"浏览器"的浏览器.以及一如既往的酷的东西并不适用于IE浏览器(在这种情况下,IE9).

我尝试了以下方法:

@font-face { font-family: Roboto; src: url('../fonts/roboto/Roboto-Regular.ttf');}

经过一些提示,我在google上找到了这个,我尝试过:

@font-face { font-family: Roboto; src: url('../fonts/roboto/Roboto-Regular.ttf');
                              src: url('../fonts/roboto/Roboto-Regular.ttf#') format('truetype');
                              font-weight: normal;
                              font-style: normal;}

仍然没有成功.正如我所知,根据经验,这个问题不会有"好"的解决办法,但也许有人发现另一个坏的,即黑客让我脱离另一个即痛苦.

我正在使用Web Font Loader从Google webfonts加载字体,但它似乎只加载400重量.我希望包括300,400,700但无法找到办法.

  WebFontConfig = {
    google: { 
      families: ['Open Sans'] 
    }
  };

  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

我有一个简单的svg(由插图画家绘制),我试图转换为webfont(与其他svg一起).当我在编辑器中打开svg时,我看到它是正确的(黑色棋子用白色棋子握手).如果我将它转换为png,也是一样的.

但在我用grunt webfont将其转换为webfont 之后

   webfont: {
        icons: {
            src     : 'path/svg/*.svg',
            dest    : 'path/fonts',
            destCss : 'path/css',
            options : {
                autoHint: false,
                font    : 'icons',
                hashes  : false
            }
        }
    }

但是在webfont中它看起来很奇怪(除了轮廓之外一切都是透明的)

这是我为其生成的webfont和css 的示例:

@font-face {
    font-family: 'icons';
    url('font/icons.woff') format('woff'),
    font-weight: normal;
    font-style: normal;
}
.icon {
    font-family: 'icons';
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    speak: none;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: …

我正在使用谷歌Roboto和Roboto Sanswebfonts.阅读Google Developers Doc,有一种方法只能嵌入整个webfont的某些字母?text=customletters.

我已经生成了这两个嵌入链接:

<!-- whole roboto font -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<!-- only custom letters of roboto slab using text?= -->
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700?text=I%20am%20an%20example' rel='stylesheet' type='text/css'>

1)这对我在野生动物园中不起作用.我的代码有问题吗？

2)虽然,有没有办法将这两行组合起来,以避免在每个页面加载时向另一台服务器发出两个请求？

3)最后和最不重要的是,嵌入@import和link href嵌入方式是否会对性能产生任何影响？

JSFIDDLE DEMO

我正在使用HTML邮件程序(HTML电子邮件),我收到的设计包含自定义字体.如何在HTML电子邮件中使用自定义字体？

提前致谢.

我是Bootstrap的新手，我在本地安装了4.1.1版本（node.js，npm，gulp和sass）。

抱歉，这是一个愚蠢的问题，但是我是否必须从Google导入Roboto字体系列，或者Bootstrap已经导入了该字体？我不想添加任何多余的CSS。

谢谢！鲍勃:)

我正在构建一个允许用户上传自定义字体的Web界面。问题是我无法通过FileReader.readAsDataUrl（）将字体文件（特别是.ttf，.woff和.woff2文件）转换为base64，以便随后可以通过我的API放置这些文件。

我可以成功reasAsDataUrl .png和.jpg文件，并以base64编码的字符串的形式接收这些文件的数据，没问题。但是，当我尝试对.ttf，.woff或.woff2文件执行相同的操作时，尽管FileReader不会引发任何错误，但reader.result为空。

我正在使用输入元素来允许用户选择字体：

<input type="file" accept="application/font-woff" onChange={handleUpload}/>

handleUpload函数如下所示：

handleUpload: () => (event: Object) => {
   const { currentTarget: element } = event;

   if (!element.files) { return; }

   const file = element.files[0];

   const reader = new FileReader();
   reader.onerror = (error) => {
     console.error('Error: ', error);
   };
   reader.readAsDataURL(file);

   console.log(reader.result); // reader.result is empty
}

这是我传递给readAsDataURL函数的文件对象。