标签: google-fonts
如何离线托管 Material Design 图标？
我想为我的离线 Web 开发项目离线托管 Material Icons（我部署的计算机上没有互联网）。从我的谷歌搜索中，我找到了这个答案。但这对我不起作用。我的问题是如何让它发挥作用。如何为我的离线项目离线托管材料设计图标？
我已在此处附加了 SSCCE 项目的 .zip 文件，该文件重现了该问题。
基本上我从这里下载了MaterialIcons-Regular.eot、MaterialIcons-Regular.ttf、MaterialIcons-Regular.woff和MaterialIcons-Regular.woff2将它们放在我的项目目录中。
这是我的索引文件：
<!DOCTYPE html>
<html>
<head>
<title>MaterializeTest</title>
<link rel="stylesheet" href="material-fonts.css" />
<link type="text/css" rel="stylesheet" href="materialize.min.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1"/>
<script src="jquery.min.js"></script>
<script src="materialize.min.js"></script>
</head>
<body>
<a href="#!"><i class="material-icons">chevron_left</i></a>
</body>
</html>
这是 CSS 文件。
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.woff2) format('woff2'), …推荐指数
解决办法
查看次数
如何在 IdentityServer4 中允许 Google 字体
要在 IdentityServer3 中使用 Google 字体，以下 Content-Security-Policy 从未奏效：
<meta http-equiv="Content-Security-Policy"
content=" style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
font-src 'self' 'unsafe-inline' https://fonts.gstatic.com data:">
相反，我们在 idsrvApp.UseIdentityServer 构造函数中配置了 CspOptions，它确实有效：
CspOptions = new CspOptions {
FontSrc = "https://fonts.gstatic.com",
StyleSrc = "https://fonts.googleapis.com",
Enabled = true
}
我们如何在 IdentityServer4 中配置 CspOptions？我很难找到它。
推荐指数
解决办法
查看次数
带CDN参考的盖茨比
我试图在我的Gatsby项目中使用bootstrap.css和Google字体CDN。
没有HTML文件；只是JavaScript文件。
对于引导程序，我可以从中npm install bootstrap导入min.css。
试图弄清楚如何Amatic SC从Google字体中获取字体；我已经npm安装好了google-fonts-webpack-plugin。
我gatsby-node.js通过添加使用：
const GoogleFontsPlugin = require("google-fonts-webpack-plugin")
exports.modifyWebpackConfig = ({ config, stage }) => {
config.plugin("google-fonts-webpack-plugin",new GoogleFontsPlugin(
{
fonts: [
{ family: "Amatic SC" }
]
}
),null)
};
但是，我得到以下错误；
无效的“构造函数”参数。您必须提供函数或null
我在做什么错，我该如何解决？
有没有一种直接引用CDN的方法，所以除了npm安装引导程序外，我还可以引用其最新版本？
推荐指数
解决办法
查看次数
使用 NextJs 和 tailwindCSS 自定义 google 字体
我想在我的 NextJS 应用程序中使用谷歌字体。我使用 tailwindCSS 并且已经在 _document.js Head 部分导入了参考链接。在 tailwind.config 文件中，我定义了 fontFamily，但是当我尝试使用自定义类时，它不会将字体系列应用于 html 元素。我究竟做错了什么？
我的 _document.js 文件：
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
tailwind.config 文件：
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: [ …推荐指数
解决办法
查看次数
等宽字体字符的宽度不固定
我正在尝试对齐一些字符以在 html 中绘制一个框。我选择了等宽字体，以便字符对齐，并为每行绘制了具有相同数量字符的框。
\npre {\n font-family: \'Roboto Mono\';\n white-space: pre;\n}<link rel="preconnect" href="https://fonts.googleapis.com">\n<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\n<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">\n<pre>\n \xe2\x95\xad\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x95\xae\n \xe2\x94\x82.........................................................................\xe2\x94\x82\n \xe2\x94\x82-------------------------------------------------------------------------\xe2\x94\x82\n \xe2\x94\x82 \xe2\x94\x82\n \xe2\x95\xb0\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x95\xaf \n</pre>不过，当我在浏览器中渲染它时，最右边缘有时可能会错位，具体取决于所使用的等宽字体。
\n当我使用 Roboto Mono 时：
\n
当我使用 Space Mono 时：
\n
由于某种原因，我的等宽字符不是等宽的。为什么会发生这种情况？如何强制等宽以对齐字符？
\n推荐指数
解决办法
查看次数
PyQt5：使用谷歌字体
是否可以在 PyQt5 应用程序中使用谷歌字体？我正在尝试向像素图中添加一些文本，并希望能够在可能的情况下使用谷歌字体。https://fonts.google.com/。
我一直无法在网上找到任何关于此的信息。
def addText(pixmap, w, h, name):
painter = QPainter()
font = painter.font()
font.setPointSize(36);
painter.begin(pixmap)
position = QtCore.QRect(0, 0, w,h)
painter.setFont(font);
painter.drawText(position, Qt.AlignCenter, name);
painter.end()
return pixmap
如果可能的话，关于如何使这项工作有任何想法？提前致谢
推荐指数
解决办法
查看次数
谷歌字体包是否会下载设备上的字体？
在我的 flutter Android 应用程序中，第一次启动时，该应用程序显示默认字体，一秒钟后它更改为我从 google fonts flutter 包中使用的字体。我想我的问题是，应用程序第一次启动时是否会立即下载字体？如果是，可以使用应用程序编译字体，这样就不需要将其下载到设备上。
推荐指数
解决办法
查看次数
无效的常量值文本 Flutter Google Fonts
我有一个文本，我正在使用 Google 字体进行样式设置并且工作正常，但是当我在文本之前添加 const 时，我收到无效的常量值错误
下面是我如何在没有 const 的情况下实现
Text(
'Voila',
style: GoogleFonts.dawningOfANewDay(fontSize: 30),
),
下面是我尝试使用 const 实现的方法
const Text(
'Voila',
style: GoogleFonts.dawningOfANewDay(fontSize: 30),
),
下面是我如何尝试使谷歌字体保持不变，但错误仍然存在
const Text(
'Voila',
style: const GoogleFonts.dawningOfANewDay(fontSize: 30),
)
推荐指数
解决办法
查看次数
如何在 NextJS 13 中导入自定义谷歌字体？链接标签不起作用
我正在尝试在最新版本 13 的Nextjs项目上使用Google Fonts，但无法正确导入 Google Fonts（即 Poppins）。
过去我只是将链接标签添加到_document.js或_app.js文件中，仅此而已。
我正在尝试这种方式但没有成功：
<Head>
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"></link>
</Head>
过去，另一种方法是使用 @import 在全局 CSS 样式表上导入 Google 字体，但此方法也不起作用：
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,700");
请告诉我如何在 Next 版本 13 及更高版本上执行此操作
推荐指数
解决办法
查看次数
flutter 更新后遇到错误。从两个库导入的 AssetManifest
我有一个一年前创建的应用程序，效果很好。最近我打开代码，Flutter 建议我进行更新。更新后就不能用了。遇到的错误表明我从'package:flutter/src/services/asset_manifest.dart'和 中导入了 AssetManifest 'package:google_fonts/src/asset_manifest.dart'。
在调试模式下在 IA 模拟器上的 AOSP 上启动 lib/main.dart...运行 Gradle 任务“assembleDebug”...../../.pub-cache/hosted/pub.dev/google_fonts-3.0.1/lib /src/google_fonts_base.dart:14:1：错误：“AssetManifest”是从“package:flutter/src/services/asset_manifest.dart”和“package:google_fonts/src/asset_manifest.dart”导入的。导入'asset_manifest.dart'; ^^^^^^^^^^^^^^ ../../.pub-cache/hosted/pub.dev/google_fonts-3.0.1/lib/src/google_fonts_base.dart:34:31：错误： “AssetManifest”是从“package:flutter/src/services/asset_manifest.dart”和“package:google_fonts/src/asset_manifest.dart”导入的。AssetManifest assetManifest = AssetManifest(); ^^^^^^^^^^^^^^ 目标 kernel_snapshot 失败：异常
失败：构建失败并出现异常。
其中：脚本'/Users/innot/Developer/flutter/packages/flutter_tools/gradle/src/main/groovy/flutter.groovy'行：1214
出了什么问题：任务“：app：compileFlutterBuildDebug”执行失败。
进程'命令'/Users/innot/Developer/flutter/bin/flutter''以非零退出值1完成
尝试：使用 --stacktrace 选项运行以获取堆栈跟踪。使用 --info 或 --debug 选项运行以获得更多日志输出。使用 --scan 运行以获得完整的见解。
在https://help.gradle.org获取更多帮助
7 秒内构建失败异常：Gradle 任务 assembleDebug 失败，退出代码为 1
推荐指数
解决办法
查看次数
标签 统计
google-fonts ×10
flutter ×3
reactjs ×3
css ×2
javascript ×2
next.js ×2
dart ×1
flutter-text ×1
gatsby ×1
html ×1
materialize ×1
monospace ×1
pyqt ×1
pyqt5 ×1
python ×1
security ×1
tailwind-css ×1