标签: google-font-api

我很抱歉，我什至不确定我自己应该从哪里开始进行预研究。我希望这不是一个基于意见的问题，而是一个特定的 Laravel 使用问题。我很好奇是否有特定的方法可以在 Laravel 项目中包含 Google 字体或多种 Google 字体。我可以轻松地将其放入任何其他网页，但我的直觉告诉我，可能有一种更强大的使用字体的方法，而不仅仅是放置

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

在主 Blade 布局模板中包含行。当然，我什至可以用 Blade{{ HTML::style(...) }}之类的工具来缩短它，但这似乎仍然没有充分利用 Laravel 框架。

例如，假设我想更改正在使用的特定字体：如果我使用多个模板，则必须进入并更改引入该字体的每个包含行。但理想情况下，我希望只有一个google-font变量，我可以在一个地方对其进行调整。

如果问得不是太多，您是否也能够解释有关这些字体变量应该/可以存储在何处以及如何存储的任何理论？

我正在为每种谷歌字体寻找后备字体系列。其背景是我创建了一个包含所有谷歌字体的CSS 实用程序模块。字体实用程序的生成大致如下：

@each $font in 'Open Sans', Montserrat, Roboto, Lato, ... {

   .u-font-$(font) {
      font-family: var(--font-$(font)) !important;
    }
}

我还想为每种字体添加一个自定义后备系列。有谁知道是否有办法获得一个字体系列，该字体系列是每种字体的良好浏览器后备？以下是我想做的大约：

        .u-font-$(font) {
          font-family: "$(font)", var(--$(font)-fallback-family) !important;
        }
    }

我正在使用 puppeteer 将一些 HTML 转换为 PNG 使用screenshot。

首先，我获取一些 SVG，然后创建一个页面，并将 SVG 设置为页面内容。

fetch(url)
  .then(data => data.text())
  .then((svgText) => {
    // res.set('Content-Type', 'text/html');
    const $ = cheerio.load(svgText)
    return $.html()
  })
  .then(async (html) => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.setContent(html)

    const file = await page.screenshot()
    res.set('Content-Type', 'image/png');
    await browser.close()
    res.send(file)
  })
  .catch((err) => {
    console.log(err);
    logger.log({
      level: 'error', message: 'GET /product', err
    })
  })
})

问题是，我的 SVG 中的文本包含特定字体。该字体是使用 @import CSS 标签加载的。如果我将方法设置为返回 HTML，则会加载字体，然后在稍加延迟后，它们就会应用到我的文本中。不幸的是，当使用screenshot方法时，我的文本不再有样式。我想这是因为屏幕截图是在加载和应用字体之前拍摄的，因此使用后备字体渲染文本。 …

而不是使用远程 Google Font CSS：

<link href="https://fonts.googleapis.com/css2?family=FontName&display=swap" rel="stylesheet">

我希望一切都在本地。我记得仅仅下载这个CSS文件并将其插入到我的CSS中是不行的，因为如果你从桌面、移动设备等下载它，CSS文件实际上会有所不同。它会适应浏览器上的字体格式（WOFF、TTF） ， ETC。）

问题：什么相当于：

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/merriweather/v28/u-440qyriQwlOrhSvowK_l5-fCZM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

在所有浏览器上工作，并在本地存储字体文件？

我们是否必须包含 woff2、ttf 等 - 按什么顺序？这个的标准是什么？

我想将 Quicksand 字体添加到我的网站，因此 google 提示我添加以下内容：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=**Quicksand:wght@500**&display=swap" rel="stylesheet">

第一行代码（即预连接到 fonts.googleapis.com）会给我们带来什么好处？

我的意思是，我明白预连接到 fonts.gstatic.com 的意义，因为字体文件驻留在该域中。

每次刷新页面时,我都要等待一堆请求返回,然后才真正看到字体出现.字体被缓存,所有这些请求都返回"未修改"标题.在确定字体未被修改之前,不显示字体是否是正确的浏览器行为？我错过了什么吗？

我知道我可以使用通用后备字体,直到加载正确的字体,但这将打破我的页面.

我在Ubuntu上看到Chrome和Firefox中的这种行为.我的互联网真的很零散,所以有时候我不得不盯着一个看不见文字的满载页面,这真的令人沮丧.

这是一个示例CSS

h1 {
   font-family: 'header-font', arial, sans-serif;
}

p {
   font-family: 'paragraph-font', arial, serif;
}

是否可以加载任何远程Google字体(比如'Lato'),以便CSS中的系列名称为'header-font'？

编辑:这背后的想法是能够轻松交换WP主题中的字体.不幸的是,在我的情况下,在CSS预处理器中使用变量不是一个选项.

来自谷歌字体的"Roboto"字体在400处显得更加大胆,然后在我的视网膜MacBook上显示为700.

我已经尝试了-webkit-font-smoothing antialiased技巧但它似乎没有用.有什么办法可以解决这个问题吗？谢谢.

更新: 虽然我不是100%肯定,但很可能是谷歌服务器上的一个错误.我下载了字体系列并将下载的字体应用到我的网站上,现在Roboto 400看起来很正常......

Google字体支持加载字体的特定字符：

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

Google字体还支持通过一个请求加载多个系列和样式：

http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

有没有一种方法可以在不发出多个请求的情况下为不同的家族加载不同的字符集？看来，由于text是一个单独的查询参数，答案是“不，该text参数适用于所有请求的族和样式”，但我想我会把它扔在那里。

更新： @Gothburz的答案显示可以subset通过一个请求加载多种字体的特定s，但是我还没有找到一种text通过一个请求加载特定范围的方法。

我不知道怎么可能......如果我使用谷歌字体@font-face(使用localfont.com创建)或使用标准link样式表(从谷歌服务器下载),有一个不同的渲染.

标准"方式"的渲染优于使用font-face(mh主机上的文件)添加的字体.我只尝试使用firefox.怎么可能？

我更喜欢@ font-face,因为认为这对性能更好,但如果渲染会很难看,那不是一个好主意......

我希望你能帮助我.对不起我的英文,非常感谢!:)