标签: google-webfonts

导入的字体和Highcharts JS导出

是否可以
使用Highcharts 导出导入的字体（例如Google webfonts或自己的.ttf fontface）？

如您在小提琴中看到的

如果您尝试导出，则使用标准字体。

title: {
   style: { 
      color: '#000',
      fontFamily : 'Patrick Hand SC'
          }
       }

Run Code Online (Sandbox Code Playgroud)

我也尝试使用本地.ttf字体进行尝试，但无法更改导出字体。

highcharts google-webfonts

tdh*_*ter

lucky-day

3
推荐指数

1
解决办法

1947
查看次数

Google字体的字体重量为100不起作用

我有一个Android游戏使用谷歌字体的Raleway字体,在游戏中它看起来不错.我也希望在网站上使用该字体,但字体不会显示相同的字体.在我使用的游戏中Raleway-Thin,这与我想在网站上使用的游戏相同.我遇到的问题是瘦字体不像游戏中那么薄.

@import url(http://fonts.googleapis.com/css?family=Raleway:500,600,700,100,800,900,400,200,300);

body{
    font-family: 'Raleway', sans-serif;
}

h1, h2, h3, h4, h5, h6{
    font-weight: 100;
}

Run Code Online (Sandbox Code Playgroud)

当设置font-weight为100, 200, 300, 400 or 500权重始终是相同的.是什么造成的？

css fonts webfonts google-webfonts

Get*_*awn

2015 07-07

3
推荐指数

1
解决办法

2070
查看次数

Google字体未在我的电子邮件中显示

我无法在我的电子邮件中显示Google字体.它通过我的浏览器在本地显示,但是当我向Gmail,MSO等发送测试时,它无法正常工作.我能够让MSO后备成为Arial,但我不明白我是如何在Gmail上显示它的.

以下是我所拥有的</head>以及紧随其后的内容<body>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta property="og:title" content="*|MC:SUBJECT|*">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="format-detection" content="telephone=no">



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


  <style type="text/css">
    /* /\/\/\/\/\/\/\/\/ MAIL CLIENT & BROWSER-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
    #outlook a {
      padding: 0;
    }
    .ReadMsgBody {
      width: 100%;
    }
    .ExternalClass {
      width: 100%;
    }
    .ExternalClass,
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td,
    .ExternalClass div { …

Run Code Online (Sandbox Code Playgroud)

html css html-email css3 google-webfonts

Mik*_*aco

2016 06-30

3
推荐指数

1
解决办法

1322
查看次数

如何使用CSS的特定字体样式,来自Google字体(即瘦,超轻......)

谷歌服务的字体像蒙特塞拉特有很多不同的风格:薄,超轻,轻,常规等...

我找不到用CSS指定样式的方法.使用Font-weight只能访问其中一些,如此CodePen中所示

<link href='//fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800' 
rel='stylesheet' type='text/css'>

Run Code Online (Sandbox Code Playgroud)

<p class="w100">This is 100 weight</p>

body {
 padding: 0 20px;
 font-family: 'Montserrat';
 font-size:40px;
}

.w100 {
 font-weight: 100;
}

Run Code Online (Sandbox Code Playgroud)

我想使用Extra-Light风格,但常规是我得到的最轻.

对此有直接的解决方案吗？

更新:这是一个浏览器问题.我的Chrome存在字体问题.我发布的代码工作得很好.

html css fonts google-webfonts

is_*_*ken

2017 03-01

3
推荐指数

2
解决办法

3万
查看次数

MathJax：使用某些 Google 字体时表达式的大小不正确

我正在尝试创建一个包含一些数学内容的 HTML 文件，该文件将使用 MathJax 进行渲染。然而，当使用谷歌字体（在我的例子中，Lusitana）时，数学表达式的大小错误。当使用计算机上安装的普通字体或其他一些 Google 字体时，它们会正确显示。我真的很想使用 Lusitana - 有什么办法让它发挥作用吗？

编辑1：我的平台是Ubuntu 16.04，Chrome 62。该问题不会发生在Firefox上。

以下是使用 Lusitana 字体呈现的以下源代码的外观： https: //i.stack.imgur.com/M5bML.jpg

产生问题的 HTML 源代码是：

<html>
<head>
<style>
 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
 @import url('https://fonts.googleapis.com/css?family=Lato'); 
 @import url('https://fonts.googleapis.com/css?family=Lusitana'); 

body {
    font-family: "Lusitana", Garamond, Baskerville, "Times New Roman", serif;
    /* font-family: "Open Sans", Garamond, Baskerville, "Times New Roman", serif; */
}

p {
    font-size: 20px;
}
        </style>
        <script type="text/javascript">
window.MathJax = {
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        processEscapes: true
    },
};
        </script>
        <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML">
        </script> …

Run Code Online (Sandbox Code Playgroud)

html css fonts mathjax google-webfonts

ARV*_*ARV

2017 12-13

3
推荐指数

1
解决办法

1375
查看次数

google webfont无法在IE中工作

我在使用Google网络字体时遇到了一些奇怪的行为.现在我正在使用它就像嵌入样式表一样,它运行正常.

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Orienta' rel='stylesheet' type='text/css'>

Run Code Online (Sandbox Code Playgroud)

但是当我将这个@ font-face值用于我的css文件时,它无法正常工作.

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
@font-face {
  font-family: 'Orienta';
  font-style: normal;
  font-weight: 400;
  src: local('Orienta'), local('Orienta-Regular'), url(http://themes.googleusercontent.com/static/fonts/orienta/v1/nPJ0J30J_zQZtBhztPPbaA.woff) format('woff');
}

Run Code Online (Sandbox Code Playgroud)

这些代码发生了什么,我认为它们在上面都有相同的作用.伙计们好吗？

注意.另外我打算将这些字体下载到我的系统并从服务器加载它.提前致谢.

css google-webfonts

Rin*_*rge

lucky-day

2
推荐指数

1
解决办法

8207
查看次数

使用webfont加载器加载多个权重自定义字体

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

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

Run Code Online (Sandbox Code Playgroud)

但是,似乎加载程序没有检测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;
}

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

webfonts font-face google-webfonts

Sim*_*ias

lucky-day

2
推荐指数

1
解决办法

2583
查看次数

如何将Google Web字体转换为组合CSS

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

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

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

我有几个问题.

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

css webfonts font-face google-webfonts

Jam*_*tch

2013 04-02

2
推荐指数

1
解决办法

5141
查看次数

获取Raleway衬里数字以供系统字体使用

我们想在我们的电脑上使用Raleway,但数字默认是抖动的.描述说,可以实现水平对齐的衬里版本.

我发现这个问题详细说明了如何通过CSS获取衬里版本但有没有人知道如何在下载中获取它？

fonts opentype google-webfonts

Ste*_*cke

2017 05-23

2
推荐指数

1
解决办法

5655
查看次数

只嵌入了一些google webfonts的字母

我正在使用谷歌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'>

Run Code Online (Sandbox Code Playgroud)

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

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

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

JSFIDDLE DEMO

javascript webfonts google-webfonts

Mar*_*ick

2016 03-04

2
推荐指数

1
解决办法

521
查看次数