正文 

当前位置： 首页 > 问答 >

将自定义字体加载到网站中[重复]

     2023-03-15     236

关键词：

【中文标题】将自定义字体加载到网站中[重复]【英文标题】：Loading custom fonts into the website [duplicate] 【发布时间】：2015-07-29 11:57:30 【问题描述】：

任何人都可以帮助我，我在我的网站项目中使用了特定的字体。匿名用户不知道如何下载、安装这些字体，如果没有安装这些字体，那么网站看起来不错。有什么办法，或者一些中心网站的字体可以上传和共享特定字体使用。像bootstrap、jquery一样，提供libs来使用它。

【问题讨论】：

创建网络字体并将文件保存在您的服务器中。 你能用谷歌字体吗... 【参考方案1】：

使用 CSS3 功能，您可以使用自定义字体。您只需要在服务器上上传字体并在 css 代码中定义路径。

很少有字体需要不同的格式类型才能在不同的操作系统上工作。因此您可以使用online font converter 创建所有字体类型格式。 

@font-face 
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

【讨论】：

这个解决方案对你有用，你可以接受答案。【参考方案2】：

使用 Google 字体

这里是link。

如何使用它？寻找quick use 按钮。

1.选择要使用的字体并选择其样式

在这里，我将使用Open Sans。

2。创建指向页面的 CSS 链接

然后，google 将生成它的链接以供使用。示例：

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>'

在你的页面中使用它。

3.向 CSS 脚本添加规则

在您的 css 脚本上，添加：

font-family: 'Open Sans', sans-serif;

实际上，Google 字体非常简单。请务必使用quick use 按钮来了解我的意思。

【讨论】：

【参考方案3】：

您正在寻找网络字体。使用这样的 CSS，您可以告诉浏览器从 URL 下载字体并在页面上使用它们：

@font-face 
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");

来源：@fencepost's answer to How to embed fonts in HTML? on SO

Google Fonts 是托管字体文件的服务示例。 Typekit 是另一个。

您可以自己滚动，但您需要将文件转换为所有必要的格式以确保兼容性。 IANAL，但您可能希望在这样做之前检查托管您自己的字体的合法性。

【讨论】：

如何配置 webpack 以将自定义字体加载到故事书中？

】如何配置webpack以将自定义字体加载到故事书中？【英文标题】：Howtoconfigwebpacktoloadcustomfontsintostorybook?【发布时间】：2020-05-2720:34:16【问题描述】：我是webpack的新手，我正在尝试按照本教程https://medium.com/@mushti_dev/hey-e6faa20b910a... 查看详情

将自定义图标添加到字体真棒

】将自定义图标添加到字体真棒【英文标题】：Addcustomiconstofontawesome【发布时间】：2012-07-1016:31:25【问题描述】：我喜欢FontAwesome图标字体，并希望将它用于我网站上的大多数图标，但除了提供的内容之外，我还需要一些自定义s... 查看详情

将自定义常量添加到系统常量[重复]

】将自定义常量添加到系统常量[重复]【英文标题】：Addingcustomconstanttosystemconstants[duplicate]【发布时间】：2013-10-2019:42:23【问题描述】：我想知道这里是否有任何方法可以将自定义常量添加到系统常量中。例如在我的编码中我经... 查看详情

将自定义字体安装到 WP 中不起作用

】将自定义字体安装到WP中不起作用【英文标题】：InstallingcustomfontintoWPnotworking【发布时间】：2021-06-1507:07:54【问题描述】：所以，我尝试在我的网站上使用RubikMonoOne字体，但它不会显示给任何人。我使用@fontface并尝试清除我的... 查看详情

将自定义数据加载到张量流管道中

】将自定义数据加载到张量流管道中【英文标题】：LoadcustomDataintoatensorflowpipeline【发布时间】：2021-11-2712:27:19【问题描述】：我正在尝试实现从加载数据的代码官方tensorflow数据集，让它加载我放置在我的谷歌驱动器上的数据data... 查看详情

使用 Xcode 将自定义字体捆绑到 macOS 独立应用程序中

】使用Xcode将自定义字体捆绑到macOS独立应用程序中【英文标题】：BundlecustomfontsintomacOSstandaloneapplicationusingXcode【发布时间】：2020-11-2416:09:51【问题描述】：我是macOS独立应用程序开发的新手，我正在努力解决其中的问题。我遇到... 查看详情

将自定义框架 xib 加载到主应用程序中引发错误

】将自定义框架xib加载到主应用程序中引发错误【英文标题】：Loadingcustomframeworkxibintomainappthrowingerror【发布时间】：2020-02-1103:19:44【问题描述】：我正在使用QKMRZScanner，并将其添加到包装框架中。所以我创建了一个UIView并命名... 查看详情

如何将自定义数组保存/重新加载到 plist

】如何将自定义数组保存/重新加载到plist【英文标题】：Howtosave/reloadacustomarraytoaplist【发布时间】：2011-02-2420:44:43【问题描述】：我正在从sqlite数据库加载数据，将从那里加载的值存储在自定义类的实例变量中，然后将此类添加... 查看详情

无法将自定义字体添加到应用程序

】无法将自定义字体添加到应用程序【英文标题】：Can\'taddcustomfonttoapplication【发布时间】：2013-07-2406:22:11【问题描述】：我在应用程序中使用自定义字体时遇到问题。以下描述了我采取的步骤1-将.TTF字体添加到应用程序2-修改in... 查看详情

如何在 PowerShell 中运行 appCmd 以将自定义标头添加到默认网站

】如何在PowerShell中运行appCmd以将自定义标头添加到默认网站【英文标题】：HowtorunappCmdinPowerShelltoaddcustomheaderstotheDefaultWebSite【发布时间】：2014-03-0207:19:57【问题描述】：请帮助我弄清楚如何正确转义参数，以便它们在powershell中... 查看详情

如何将自定义函数加载到 R 中的 foreach 循环中？

】如何将自定义函数加载到R中的foreach循环中？【英文标题】：HowcanIloadcustomfunctionsintoforeachloopinR?【发布时间】：2021-08-1104:13:28【问题描述】：我正在尝试运行具有特定空间相关结构的gls模型，该结构来自于修改nlme包/在全局环... 查看详情

如何将自定义字体添加到我的应用程序？ [复制]

】如何将自定义字体添加到我的应用程序？[复制]【英文标题】：HowdoIaddacustomfonttomyapp?[duplicate]【发布时间】：2013-07-3022:36:50【问题描述】：编辑：我想通了！答案贴在下面。感谢JSD！我一定遗漏了一些东西，因为我认为这是一... 查看详情

javascriptchrome扩展程序将自定义javascript文件加载到标签的dom中。(代码片段)

查看详情

JSF2 将自定义字体添加到 CSS 样式表

】JSF2将自定义字体添加到CSS样式表【英文标题】：JSF2addcustomfonttocssstylesheet【发布时间】：2012-03-3019:35:47【问题描述】：我想使用外部字体WebSymbols我把它放在我的stylesheet.css声明中@font-facefont-family:\'WebSymbolsRegular\';src:url(\'websymbol... 查看详情

无法将自定义视图从笔尖加载到以编程方式制作的另一个视图中？

】无法将自定义视图从笔尖加载到以编程方式制作的另一个视图中？【英文标题】：Cannotloadcustomviewfromnibintoanotherviewmadeprogrammatically?【发布时间】：2011-12-3002:19:22【问题描述】：查看其他一些问题，这是我在实现自定义键盘的视... 查看详情

如何将自定义字体系列添加到 react-reader npm

】如何将自定义字体系列添加到react-readernpm【英文标题】：howtoaddcustomfontFamilytoreacr-readernpm【发布时间】：2021-11-3005:00:21【问题描述】：我正在使用react-readernpm，但我无法将自定义字体系列放入我的项目中。有人知道这个答案吗... 查看详情

在不越狱的情况下将自定义应用程序加载到 iOS 设备中？

】在不越狱的情况下将自定义应用程序加载到iOS设备中？【英文标题】：LoadcustomappintoaniOSdevicewithoutjailbreakingit?【发布时间】：2011-11-1914:19:07【问题描述】：如果我使用合法的开发人员许可证签署应用程序，是否可以在不越狱的... 查看详情

如何将自定义 CSS 添加到清晰的表单中？

】如何将自定义CSS添加到清晰的表单中？【英文标题】：HowdoIaddcustomCSStocrispyforms?【发布时间】：2017-07-1810:00:32【问题描述】：我正在尝试借助脆皮表单为我的网站创建一个响应式表单。我没有使用引导程序，我想将自定义CSS添... 查看详情