标签: google-fonts

如何通过 CSS 从 CDN 使用 Google Noto Color Emoji front

我有什么办法可以从 CDN使用Google 的彩色表情符号字体吗？我试图在 jsfiddle 中使用它，但不知道如何使用。

css google-font-api jsfiddle google-fonts

Mla*_*vic

lucky-day

8
推荐指数

1
解决办法

3473
查看次数

使用 scss 导入 Google 字体：MIME 类型冲突

我正在构建一个 Angular 应用程序，我使用 scss 进行样式设置并想要导入谷歌字体。

我有一个fonts.scss保存与字体相关的所有内容的地方。我像这样导入谷歌字体：

字体.scss

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;500;700&display=swap');

Run Code Online (Sandbox Code Playgroud)

因为有不同的文件，我需要导入到不同的组件，我有一个名为的文件，imports.scss其中包含字体和颜色变量。

导入.scss

@import 'src/styles/imports/fonts';
@import 'src/styles/imports/colors';

Run Code Online (Sandbox Code Playgroud)

现在，我的ng 组件可以通过导入使用字体和变量：

@import 'src/styles/imports';

Run Code Online (Sandbox Code Playgroud)

即使变量和字体正常工作，我在 Google Chrome 中收到以下错误：

platform-browser.js:789 GET https://fonts.googleapis.com/css2?family=Poppins:wght@300;400[_ngcontent-dsi-c57];700&display=swap net::ERR_ABORTED 400

Run Code Online (Sandbox Code Playgroud)

在Firefox中我收到此错误：

The resource from "(link to google fonts)" was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

Run Code Online (Sandbox Code Playgroud)

有办法解决这个问题吗？

css fonts sass google-fonts angular

Cen*_*asa

lucky-day

8
推荐指数

1
解决办法

2502
查看次数

使用 SASS / Gulp 将 Google 字体添加到 Bootstrap 4

我尝试使用 SASS / Gulp 在 Bootstrap 4 中实现 Google 字体（Dosis）。说到 SASS，我完全是新手。

我设法_custom.scss通过定义来更改默认颜色$brand-primary，但是当我想通过更改$font-family-sans-serif值对字体执行相同操作时，它不起作用。我重新启动了服务器并将 Google 字体包含在带有link标签的 index.html 中......但我仍然无法让它工作。

bootstrap-4 google-fonts

Pet*_*vac

lucky-day

7
推荐指数

1
解决办法

3632
查看次数

如何在我的 Android 应用程序中使用新的 Google Sans 字体？

如何在我的 Android 应用程序中使用新的 Google 应用程序（例如“电话”、“联系人”和“Google Fit”）中看到的字体？textAppearance这有什么新的价值吗？这是所需字体（标题）的预览：

据我所知，这种字体被称为“Google Sans”。

谢谢。

android android-fonts google-fonts

ole*_*ikd

lucky-day

7
推荐指数

1
解决办法

4845
查看次数

Google Fonts 包在 flutter 中不起作用

google_fonts 包在 FLutter 的最终构建 apk 中不起作用，它在调试模式下工作正常，但是一旦我构建它并安装最终 apk，它就只显示常规字体。

flutter google-fonts flutter-test flutter-dependencies

sam*_*yap

lucky-day

7
推荐指数

1
解决办法

6240
查看次数

致命错误：flutter 中的谷歌字体抛出错误

我在颤振中遇到这个错误

../../../snap/flutter/common/flutter/.pub-cache/hosted/pub.dartlang.org/google_fonts-2.3.0/lib/google_fonts.dart:142265:7: Error: No named parameter with the name 'displayLarge'.
      displayLarge:
      ^^^^^^^^^^^^
../../../snap/flutter/common/flutter/packages/flutter/lib/src/material/text_theme.dart:81:9: Context: Found this candidate, but the arguments don't match.
  const TextTheme({
        ^^^^^^^^^

Run Code Online (Sandbox Code Playgroud)

运行移动应用程序时

一些代码片段...

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.4
  cupertino_icons: ^1.0.2
  google_fonts:
  get:

Run Code Online (Sandbox Code Playgroud)

代码

     Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                'Details',
                style: GoogleFonts.pacifico(),
              ),
            )

Run Code Online (Sandbox Code Playgroud)

先感谢您

flutter google-fonts

Jan*_*iya

lucky-day

7
推荐指数

1
解决办法

8323
查看次数

如何使用 vitejs 导入 google-font？

google-font 和 vitejs 的问题

我想知道如何为我的Vite项目导入google-font（或其他字体），尽管Vite已经在index.html中对css，scss，sass等进行了所有配置，但没有关于如何配置的信息Vite 谷歌字体。请帮我。（我的配置 = Vite -> React -> TypeScript -> sass）。

google-fonts vite

koa*_*ree

lucky-day

7
推荐指数

1
解决办法

1万
查看次数

Google 字体的静态 CSS 并从您自己的网站（而不是 gstatic CDN）提供它们

而不是使用远程 Google Font CSS：

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

Run Code Online (Sandbox Code Playgroud)

我希望一切都在本地。我记得仅仅下载这个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;
}

Run Code Online (Sandbox Code Playgroud)

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

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

css fonts google-font-api google-fonts

Bas*_*asj

lucky-day

6
推荐指数

2
解决办法

3236
查看次数

部署到 Vercel 时，Google 字体未加载到 Next.js 中

运行应用程序时，http://localhost:3000一切正常且看起来很棒。但将我的 Next.js 应用程序部署到 Vercel 后，字体没有显示，日志中也没有显示任何内容。

我遵循了 Next.js 文档中的建议，这就是我的_document.tsx样子 -

import { Global } from '@mantine/core'
import { createGetInitialProps } from '@mantine/next'
import Document, { Head, Html, Main, NextScript } from 'next/document'

const getInitialProps = createGetInitialProps()

export default class _Document extends Document {
    static getInitialProps = getInitialProps

    render() {
        return (
            <Html>
                <Head>
                    <link rel="preconnect" href="https://fonts.googleapis.com" />
                    <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
                    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lora:ital@0;1&family=Roboto+Condensed:wght@300;700&display=swap" rel="stylesheet" />
                    <Global
                        styles={(theme) => ({
                            'body': {
                                backgroundColor: theme.colors.gray[3],
                                color: theme.colors.gray[8],
                                fontFamily: …

Run Code Online (Sandbox Code Playgroud)

next.js google-fonts vercel mantine

Tec*_*emn

lucky-day

6
推荐指数

2
解决办法

1万
查看次数