标签: webfonts

我正在通过webfonts.fonts.com使用免费的网络字体服务,这些服务由他们的服务器提供服务,我在Chrome/Safari浏览器控制台中收到以下警告:"资源被解释为字体但是使用MIME类型应用程序传输/八位字节流".

这是指向要放置在标题中的JS链接fonts.com:

<script type="text/javascript" src="http://fast.fonts.com/jsapi/f3d92ff3-2575-4cb8-a4b8-9b4c5d0376fb.js"></script>

这是我正在使用的CSS:

h1 { margin-bottom: 10px;font: 35px/35px 'Helvetica W01 Blk', Arial, Helvetica, sans-serif; font-weight: bold; color: #00AEEF; }

我不知道警告意味着什么并且想知道,因为它只是一个警告,而不是一个错误,是否是那么重要.我已经在各种浏览器,Mac和PC上测试了该网站,从表面上看,一切正常,看起来应该如此.

任何人都可以解释我是否做错了什么,或者即使这是一个问题？很高兴在必要时发布更多信息.

提前致谢.

使用Edge Inspect测试本地运行的站点时,不会下载或呈现Typekit字体.

我已将localhost添加到我的Typekit工具包中允许的域中,并添加了我的机器的IP地址.

在浏览器中查看时,字体呈现正常,而不是在任何设备上.

我想以所有格式下载Google网络字体,并创建一个组合的CSS,以便在任何地方使用它们,而无需从Google服务器加载它们.

我已经有一个PHP脚本下载字体文件.现在只需要CSS.

您可能知道Google网络字体API根据浏览器用户代理提供特殊的CSS.

我有几个问题.

1. 谷歌网络字体只为一个OS设备提供一种字体作为svg是真的吗,我在测试一些字体(使用伪造的用户代理)时注意到了这一点.而对于其他人来说,有多个@font-face声明,但有font-weight和font-style不同.我是否正确地假设Google仅为"常规"版本的字体提供SVG而不是"斜体,粗体,书......"
2. 什么是将它们组合成一个CSS的最佳方式,特别是对于这种组合的SVG字体.

我有一个名为 的字体文件icon-font.woff，我有相应的 SVG 文件。它里面有一些图标。现在我想使用 css 在我的 html 文件中使用这些图标，如下所示：

.icon-add-contact:before{content:""}

但我不知道我需要在content上面给出什么价值。而且我不知道哪个值属于哪个图标。

如何处理？

我过去曾经遇到过一些@ font-face webfonts.我最近下载了免费的Museo Sans 500 webfont,但我遇到了一些问题,某些字母间距正确,字面f.调整CSS letter-spacing属性时,如果有"f",则在"f"之后的第二个字母之前不会再次应用字母间距.

例如:

或者使用单词的另一个例子:

无论如何,我遇到了这个也使用字体的网站,但是当他们在网站上弄乱文本和字母间距时,它没有任何问题.

我之前从未创建或编辑过字体,所以我不确定这是否与编辑字体本身有关,或者是否与@ font-face有关,可能还有我可以用css修复的东西.

我已经尝试搞乱了我所知道的每个css字体属性,但似乎没有一个能解决这个问题.

font-variant-ligatures:
font-kerning: 
letter-spacing:     
text-rendering: 
font-feature-settings: 
font-kerning: 
-webkit-font-smoothing: 
text-size-adjust:
font-size:

我遇到了一个非常漂亮的插件,kerning.js我可以用来暂时解决这个问题,但是对于一个字母来说似乎有些过分,特别是因为它似乎在我之前链接的其他网站上工作正常.有关如何使用CSS修复此问题的任何建议,或者是我与字体本身有关的事情>

我使用 NodeJS 和 nodemailer、电子邮件模板和 ejs 向我的婚礼客人发送邀请。

我已经解决了大多数问题，但我似乎无法管理自定义字体，而且网上有很多关于它的信息......

我认为这是我见过的最详尽的文章：

所以我在 head 标签中添加了这个：

<link href='https://fonts.googleapis.com/css?family=Tillana' rel='stylesheet' type='text/css'>

但这仍然没有在 gmail 中以正确的字体显示，也没有在 Outlook 中显示（尚未测试 yahoo 和其他）...

<td align="center" valign="top" style="padding: 0; font-family: Tillana, Open Sans, Helvetica, Arial, sans-serif; color: #999999;">
    <p style="font-size: 14px; line-height: 20px;">
        Some text hopefully in Tillana
    </p>
</td>

我在电子邮件模板文档中看到，您可以使用带有custom-fonts-in-emails的字体图像渲染，但这似乎有点矫枉过正......

关于如何处理大多数情况的任何建议？

我正在尝试使用 Unicode 范围描述符对基本拉丁语（128 个字形）的字体进行子集化，但我没有看到我尝试过的少数变体的结果。

在有关减小 Web 字体大小的资源中，它给出了将拉丁字形的 unicode 范围设置为 的示例U+000-5FF。维基百科说基本拉丁语的 unicode 范围是U+0000到U+007F。

我尝试了以下几种变体（在 SASS 中）：

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    src: local("Montserrat SemiBold"), local("Montserrat-SemiBold"),
    url("#{$montserrat-font-path}/Montserrat-SemiBold-woff2.woff2") format("woff2"),
    url("#{$montserrat-font-path}/Montserrat-SemiBold-woff.woff") format("woff");
    font-display: swap;
    unicode-range: U+0000-007F; /* Basic Latin, 128 glyphs */
}

范围需要是多少？服务器（Sitecore/.Net）上是否需要配置？我是否以正确的方式检查文件大小？如何减小文件大小？

另外... [附带问题] 我还没有遇到此功能的服务器兼容性。看起来服务器必须参与决定要提供哪些字形。我们是否应该假设所有现代服务器都可以做到这一点？

我正在尝试解决Google WebFonts的问题.我想使用他们的字体Signika.如你所见,它有Š,Ů声明/实现的字母.然而,在我们的网站上,它不会呈现这些字母,而只是标准和单词DOMŮ - 字母Ů是另一种字体,而字母DALŠI字母Š是另一种字体.这有什么解决方案吗？我应该为这些类型的字母声明一些编码,或者问题出在哪里？

我下载了一些空白的wordpress主题文件,并开始用自己的php,html和css填充它们.我使用以下代码来加入google webfont:

    function load_fonts() {
            wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Tauri');
            wp_enqueue_style( 'googleFonts');
        }

 add_action('wp_print_styles', 'load_fonts'); 

但我想添加另一个webfont.我尝试了两件事:

1:使用','在wp_register_style中添加它

function load_fonts() {
            wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Tauri','http://fonts.googleapis.com/css?family=Muli');
            wp_enqueue_style( 'googleFonts');
        }

 add_action('wp_print_styles', 'load_fonts'); 

2:重复:

    function load_fonts2() {
            wp_register_style('googleFonts2', 'http://fonts.googleapis.com/css?family=Muli');
            wp_enqueue_style( 'googleFonts2');
        }

 add_action('wp_print_styles', 'load_fonts2'); 

不幸的是,两种方式都不起作用 任何人都可以告诉我为什么上面的方法不起作用,以及如何添加多个webfonts.先感谢您!

积分

我有一个Netlify CDN通过我的GitHub拉文件,除了加载字体外,一切看起来都很好.我对CDN很新,但一直在研究和学习很多东西.

但是......我花了4个小时研究如何启用它,我在他们的文档或其他有类似问题的人身上找到的唯一的东西就是我需要在根目录中创建一个_header文件,但是他们没有不指定与字体有关的任何内容.他们只是告诉我这个示例代码.

网站链接:https: //www.netlify.com/docs/headers-and-basic-auth/

示例标题:

## A path:
/templates/index.html
  # Headers for that path:
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block
/templates/index2.html
  X-Frame-Options: SAMEORIGIN

有人对这个有经验么？我即将找到一个新的CDN,但不确定还有谁可靠.