那些遇到过的问题

标签: webfonts

从谷歌网络字体加载字体或从自己的服务器加载字体，哪一种在页面加载时间方面更有效？

在使用一些自定义字体时，我有两个选择，要么从我自己的服务器加载表单，要么加载谷歌网络字体。但我关心的是哪一个在页面加载时间方面有效？

我使用css的方式是

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
    }
Run Code Online (Sandbox Code Playgroud)

在这里，在加载字体时，我还使用字体版本进行缓存并从 CDN 加载字体。

我尝试加载的字体大小接近 36k。

h1 {
       font-family: 'MyWebFont', Fallback, sans-serif;
}
Run Code Online (Sandbox Code Playgroud)

谷歌字体的实现

<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing' rel='stylesheet' type='text/css'>

h1{
  font-family: 'Caesar Dressing', cursive;
}
Run Code Online (Sandbox Code Playgroud)

有人可以帮助我了解应该使用谷歌网络字体还是自定义表单自己的服务器中的哪一个。就页面加载时间而言，哪一个最好？

css fonts webfonts font-face google-font-api

Soa*_*abh
2013 03-26
3
推荐指数
1
解决办法
1万
查看次数

@font-face：图标字体和转换 CSS 字符（十六进制）值

背景

我目前正在大量使用 webfonts，特别是图标字体。我需要确定特定图标的哪个字符用于测试目的，因此我可以简单地输入字符和/或复制粘贴它。

例子

大多数图标字体的 CSS 是相似的，使用 :before 伪方法，例如

.icon-search:before{content:"\f002"}
Run Code Online (Sandbox Code Playgroud)

题

  • 我相信这种编码被称为 CSS 字符（十六进制），这是正确的吗？
  • 是否有任何工具允许我输入转义的 CSS 字符值并将其转换为我可以复制和粘贴的值
  • 是否有工具可以将其转换为 HTML 十进制值，例如 & = simple amperstand

概括

我希望能够找出它是哪个字符，这样我就可以简单地在键盘上输入它。我花了很长时间查找它，但不太确定这种类型的编码和转换称为什么，所以找不到我要找的东西。我很感激一些指点。

icons character-encoding webfonts font-face icon-fonts

Tim*_*dly
lucky-day
3
推荐指数
1
解决办法
3403
查看次数

样式的unicode箭头未显示Google Fonts Web字体

我试图在网页上使用字体源代码专业版,以及在其样本页面中可见的华丽箭头.

我使用Google字体在我的页面上包含该字体,该字体不会在其各自的页面上列出箭头.但是如果你从样本页面或htmlarrows.com中复制/粘贴一些箭头,它们会显示出我想象的样子.

当我使用字体作为谷歌字体告诉我在我的网页上使用它时,所有其他文本成为源代码专业版,但箭头默认回到系统默认字体(Arial对我来说).

这是一个例子:

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

.container {
  border-collapse: collapse;
}

td {
  font-size: 96px;
}

td, th {
  border: 0.1rem solid #c3c3c3;
  padding: 0.5rem;
}

.row-sans-serif {
  font-family: sans-serif;
}

.row-source-code-pro {
  font-family: 'Source Code Pro', sans-serif;
}
Run Code Online (Sandbox Code Playgroud) 
<table class="container">
  <thead>
    <tr>
      <th>font-family</th>
      <th>A</th>
      <th>Left</th>
      <th>Right</th>
    </tr>
  </thead>
  <tbody>
    <tr class="row-sans-serif">
      <th>sans-serif</th>
      <td>A</td>
      <td>&#8592;</td>
      <td>&#8594;</td>
    </tr>
    <tr class="row-source-code-pro">
      <th>Source Code Pro</th>
      <td>A</td>
      <td>&#8592;</td>
      <td>&#8594;</td>
    </tr>
  </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

当我在Google字体网站上将字体添加到我的软件包时,它允许我导入Latin版本或Latin …

css unicode webfonts

Kas*_*rdi
lucky-day
3
推荐指数
1
解决办法
1211
查看次数

使用带有 webfont 的特定字形

使用 webfont，我想使用CSS 中的font-feature-settings:选项以及HTML 中的span 类，以便使用字体集中的特定替代字形。

我需要以正确的语法使用哪些值（GID、Unicode？）才能glyph在glyph替代方案中定位特定值？

在此处输入图片说明

html css fonts webfonts

Chr*_*ean
2019 03-03
3
推荐指数
1
解决办法
1118
查看次数

为什么 Safari 的默认字体跟踪/字母间距与其他浏览器不同？

我遇到了 Safari 的问题，其中使用 webfonts 的文本块（不确定 webfonts 是问题）在 Safari 中的换行方式与在任何其他浏览器中的方式不同。在这个特定的例子中，我们将这些块设计为看起来像设置为 ，text-align: justify;但实际上设置为text-align: left;。text-align: justify;在此设置中不受欢迎，因为它在计算单词之间的空间方面做得很差。

需要了解的重要事项：

  • 正如我提到的，布局使用 webfonts。哪种 webfonts 无关紧要（我已经审查了数百种并且适用于所有人）。
  • 整个页面，包括内边距和字体大小，都使用视口宽度 (vw)。这里的想法是文本块对于所有浏览器大小均等地缩放并保留其布局，包括破布。

视觉辅助：

在此处输入图片说明


有关布局和尺寸的详细信息：

  • 框架 1：Safari 桌面。
  • 第 2 帧：Chrome 桌面。
  • 第 3 帧：Chrome 的不透明度比 Safari 高 50%。
  • 此屏幕截图中的窗口宽度为1220px.
  • 左/右填充padding: 0 calc(129 / 1220 * 100vw);计算为129px。
  • 这留下了 的可用内容空间962px。
  • letter-spacing 对于所有内容，默认设置为 0。

那么，有人知道为什么 Safari 似乎夸大了跟踪/字母间距吗？


编辑

我们刚刚启动了相关网站，因此您可以在此处查看实际问题：https : //www.typography.com/fonts/hoefler-text/overview

css safari typography google-chrome webfonts

Bra*_*ham
2019 05-10
3
推荐指数
1
解决办法
2564
查看次数

如何在 HTML 中使用 TTF 作为字体系列

有人可以帮忙吗？我正在尝试将 magnum 字体（附有 URL）引用到我的 HTML 中。我尝试使用 src:url("Fonts/Magnum.ttf") 从我将其上传到文件管理器的位置，但仍然没有成功，因此尝试使用以下内容，但它不起作用。

@font-face{
  font-family: 'MyWebFont';
  src: url("/https://fontmeme.com/fonts/magnum-fakhrul-razi-font/")
  format('truetype'), 
}
Run Code Online (Sandbox Code Playgroud)

谢谢你！

html css truetype webfonts font-face

lit*_*ady
2020 10-28
3
推荐指数
1
解决办法
8650
查看次数

为什么 WebFont 下载两次然后使用预加载和字体？

我想优先下载网络字体并尝试了这个，根据https://leerob.io/blog/fonts

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />        
        <link rel="preload" href="https://leerob.io/fonts/inter-var-latin.woff2" as="font" type="font/woff2" />
        <style type="text/css">
            @font-face {
                font-family: Inter;
                font-display: optional;
                src: url(https://leerob.io/fonts/inter-var-latin.woff2) format('woff2');
            }
            body {
                font-size: 300%;
                font-family: Inter;
            }
        </style>
    </head>
    <body>
        lorem ipsum.
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

问题是浏览器下载了两次字体。codepen 在这里：https://codepen.io/snuup/pen/poPBBLg如果你刷新它，并过滤下载的字体（因为 codepen 本身有这么多文件），你会看到 2 个下载。

如何预加载字体并避免两次下载？

css webfonts

cit*_*kid
lucky-day
3
推荐指数
1
解决办法
1455
查看次数

IE 10在本地使用@ font-face,但在从服务器查看页面时则不行

我正在使用来自我自己的服务器上托管的icomoon的自定义创建的web字体.惊讶于一切都很简单.在所有浏览器上本地测试.效果很好(甚至到IE7和Firefox 4)!再次从我的服务器测试,它在IE10中不起作用.

很确定我正在声明字体是正确的:

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot');
    src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.woff') format('woff'),
        url('../fonts/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
Run Code Online (Sandbox Code Playgroud)

如果你想看一下,这里是测试网站http://www.corysgrilledcheese.com/store/的链接.

这里有一个链接到截图http://www.corysgrilledcheese.com/store/fontsBroken.png,它是我在本地加载页面时的样子,然后是从服务器查看页面的同一浏览器.

我一直在网上搜索,但到目前为止还没有运气.对解决方案的任何建议都将非常感激.

css internet-explorer webfonts font-face internet-explorer-10

spi*_*ham
lucky-day
2
推荐指数
1
解决办法
4073
查看次数

Webfont +悬停颜色:不改变颜色的文本的一部分

我已经看过几次,只在Webkit上看过.场景是你有一些悬停颜色的文本,它使用webfont自定义字体.当您悬停时,部分最右边的字母没有悬停颜色.要查看我的意思,请在Chrome或Safari中查看此小提琴,并在使用鼠标悬停时仔细查看文本末尾的"r",它不是完全红色.

http://jsfiddle.net/jaredh159/xPZB8/

来自小提琴的HTML:

<a>Some Text Foo Bar</a>
Run Code Online (Sandbox Code Playgroud)

来自小提琴的CSS:

@font-face {
    font-family: 'stephanie_marie_jfregular';
    src: url('stephanie-marie-jf-webfont.eot');
    src: url('stephanie-marie-jf-webfont.eot?#iefix') format('embedded-opentype'),
         url('stephanie-marie-jf-webfont.woff') format('woff'),
         url('stephanie-marie-jf-webfont.ttf') format('truetype'),
         url('stephanie-marie-jf-webfont.svg#stephanie_marie_jfregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

a {
    font-family: stephanie_marie_jfregular;
    color: #000;
    font-size:50px;
}

a:hover {
    color: #ff0000;
}
Run Code Online (Sandbox Code Playgroud)

这是什么？可以解决的？这只是一个创建不好的网络字体文件,还是一个糟糕的字体？任何人都熟悉这个问题或有一个解决方法？

webkit hover webfonts

Jar*_*son
lucky-day
2
推荐指数
1
解决办法
707
查看次数

越南语的Unicode范围

Google字体的Source Sans Pro实现包含越南语子集，但是，它包含各种缺少的字形，如Source Sans Pro github帐户的第90期中所讨论，但被维护者关闭。

该问题在以下代码段中可见。

/*
 Fall back to serif so the 
 missing glyphs are more
 easily visible
*/
body {
  font-family: "Source Sans Pro", serif;
  font-size: 25px;
}
p {
  margin: .1em 0 1em;
}
small {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  color: #999;
  border-bottom: 1px solid #ccc;
}
.w200 { font-weight: 200; }
.w300 { font-weight: 300; }
.w400 { font-weight: 400; }
.w600 { font-weight: 600; }
.w700 { font-weight: 700; } …
Run Code Online (Sandbox Code Playgroud)

unicode fonts subset webfonts

Jam*_*son
lucky-day
2
推荐指数
1
解决办法
2701
查看次数

标签 统计

webfonts ×10

css ×7

font-face ×4

fonts ×3

html ×2

unicode ×2

character-encoding ×1

google-chrome ×1

google-font-api ×1

hover ×1

icon-fonts ×1

icons ×1

internet-explorer ×1

internet-explorer-10 ×1

safari ×1

subset ×1

truetype ×1

typography ×1

webkit ×1