标签: webfonts

我已经下载了DejaVu开源字体并希望将其用于WebFont,但即使在转换它时,我也会得到一个大文件,因为我将使用的网站只有少数语言(阿拉伯语,法语,amazigh) )那么,我不需要一些角色.

那么有没有办法浏览字体文件并删除我不需要的不必要的unicode字符范围？

有没有办法使用谷歌字体,只加载[A-Z]和&符号字符？

我想这样做是为了减小尺寸并缩短加载时间,因为我只会使用基本的拉丁数字和字母.

如果必须的话,我可以自己托管字体,操作字体包是合法的,但我不确定是否需要自托管以及如何操作google的字体包.

我已经指定了A-Z这样的:

http://fonts.googleapis.com/css?family=Inconsolata&text=ABCDEFGHIJKLMNOPQRSTUVWXYZ

但指定&很麻烦.这两个都不起作用:

<link href='http://fonts.googleapis.com/css?family=Inconsolata&text=ABC&amp;' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Inconsolata&text=ABC&' rel='stylesheet' type='text/css'>

如果在文本字段中输入字符并且当前应用的字体不支持该字符,则会为该字符使用备份字体.是否有可能通过Javascript或其他方式判断何时发生这种情况？尝试创建一个脚本,如果字体不支持某个字符,则会提醒用户.谢谢你的帮助!

嗨，我在 google pagespeed 中遇到了这个问题，我几乎将我的网站速度提高到 100，唯一剩下的就是 Ensure text remains visible during webfont load

我已经在使用 font-display:swap; 那么为什么这不能解决我的问题。

这是我的外部字体 css

@font-face {
    font-display: swap;
      font-family: 'Miriam Libre';
      font-style: normal;
      font-weight: 400;
      src: local('Miriam Libre Regular'), local('MiriamLibre-Regular'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdTh798HsHwubBAqfkcBTL_fZ5P7.ttf) format('truetype');
    }
    @font-face {
    font-display: swap;
      font-family: 'Miriam Libre';
      font-style: normal;
      font-weight: 700;
      src: local('Miriam Libre Bold'), local('MiriamLibre-Bold'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdT-798HsHwubBAqfkcBTL_X3LbrQsq_.ttf) format('truetype');
    }

我使用这个命令生成了这个 css

npx local-webfont https://fonts.googleapis.com/css?family=Miriam+Libre:400,700 /Users/admin/Documents/projects/font.css 回退

我从https://github.com/swissspidy/local-webfont得到的

CSS中的 ui-sans-serif 和 sans-serif 字体有什么区别font-family？ui-serif 与 serif 对比？ui-monospace 与 monospace 对比？

system-ui 在哪里适合这个？您会将它用于所有 3 种类型的字体吗？它会出现在字体列表中的什么位置？

我通常会看到“ui-”变体出现在 CSS 字体列表中的第一个font-family，而另一个变体出现在最后。就像是font-family: ui-sans-serif, (more fonts here), sans-serif。如果使用第一个匹配的字体，那么这样做有什么意义呢？既然 ui-sans-serif 是通用字体，那它不是总是可以匹配的，不需要在后面添加任何字体吗？

我经常在我开发的网站中嵌入webfont(@ font-face),直到今天我才遇到重大问题.

事实上,我觉得线高有一个大问题,我不是非常擅长英语所以我会尝试用图片来说明它.我已经联系了fontshop.com的支持(购买了字体),但他们似乎并不理解/解决问题.

我们之前使用标准桌面字体(=渲染对我们有用):

我们使用font-face(CSS样式表没有变化):

这是CSS:

#content h1 {
    background:#000000;
    color:#FFFFFF;
    font-family:"DINPro-Bold","Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
    font-size:35px;
    line-height:30px;
    padding:10px;
    text-transform:uppercase;
}

这是来自网页的Photoshop设计的图像:

和具有相同大小,重量等的网页:

正如您所看到的,文本在Web渲染上渲染得更厚,直到它看起来几乎完全不同的字体.

以下是文本附带的@ font-face代码:

@font-face {
        font-family: "PT Sans";
        src: url('fonts/151428223-PTS55F.eot');
        src: url('fonts/151428223-PTS55F.eot?#iefix') format('embedded-opentype'),
        url('fonts/151428223-PTS55F.svg#PT Sans') format('svg'),
        url('fonts/151428223-PTS55F.woff') format('woff'),
        url('fonts/151428223-PTS55F.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}

...以及作为参考,Photoshop中文本的设置:

我怎么解决这个问题？

第一个"D"在Chrome 31.0.1650.63 m上呈现,第二个在IE11上呈现.

更新:

添加-webkit-font-smoothing: antialiased;问题仍然是......

这可能是视频卡的问题？

更新2:

css字体代码:

 @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(../font/font1.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(../font/font2.woff) format('woff');
}

我试图在jsFiddle中包含Google字体但没有成功.我将URL添加到"外部资源",但它包含在内<script>.

这是我想要包含的字体:

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

PhoneGap是否支持Web字体,如果支持,您如何使用它们.我目前在我的页面中有这个代码,但是当加载到模拟器中时它不起作用(在Android应用程序中,我没有尝试通过浏览器加载页面)...

@font-face {
    font-family: 'HelveticrapRegular';
    src: url('fonts/helveticrap-webfont.eot');
    src: url('fonts/helveticrap-webfont.woff') format('woff'), url('fonts/helveticrap-webfont.ttf') format('truetype'), url('fonts/helveticrap-webfont.svg#webfontHlJ0Jib3') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: "HelveticrapRegular", "Helvetica", "Arial", "sans serif";
}

当我在firefox中加载我的页面时,它确实有效,所以我不确定我做错了什么.

可能有助于说字体CSS是由fontsquirrel生成的

谢谢:)乔尔