动态引用谷歌字体从反应的应用程序

有方法可以包括谷歌字体的项目（无论是通过CSS导入或链接在HTML头或webfontloader包的帮助），但我想要做的是基于特定页面设置按需提供。动态引用谷歌字体从反应的应用程序

例如，该网站是一个博客平台。用户可以为其页面指定一个谷歌字体的链接。当任何人在他们的页面上使用该字体时。当他们进入另一个用户的页面时，另一个字体被加载（指定另一个用户）。

有没有办法做到这一点？

编辑：好吧，我不认为头可以修改，因为在我的设置它是静态的。到目前为止，我发现一对夫妇的可能的选项：

使用react-webfont-loader加载字体
使用react-helmet指定的头部一切（也网页标题，例如）。

来源

2017-10-10 Simoroshka

是的，有一种方法可以做到这一点。你将不得不采取从用户的两个输入

链接到谷歌字体
和访问符该字体

这两个细节后，你可以走第二一个作为以这种方式传递给您的字体系列字体的变量：

style={{fontFamily: this.state.acessSpecifier}}

来源

2017-10-10 15:22:04

更多关于在这种情况下我应该如何链接谷歌字体的问题？ – Simoroshka

那么，你有没有得到答案，或者你仍然需要帮助？ –

我会稍后尝试可能的解决方案，然后进行更新。 – Simoroshka

您c应该使用Web Font Loader库。它由Google和Typekit开发，主要是为了让您更好地控制字体加载，而不是Google Fonts API提供的控件。另外一个好处是，它还允许你将其与包含Typekit和Google字体的几个其他Web字体提供商一起使用它，当然这些内容包括

简而言之，它有点像@font-face的包装，所以它可能会做你正在寻找的东西，并且在加载字体时提供一些很好的控制。

快速参考实现将是：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script> 
<script> WebFont.load({ google: { families: ['Droid Sans', 'Droid Serif'] } }); </script>

而不是由逻辑内联，你定制和扩展使用WebFont.load，以适应你的业务逻辑的需求，然后可能的与您的代码捆绑在一起。

下面是该项目的链接：https://github.com/typekit/webfontloader

希望这有助于！

来源

2017-10-10 15:53:44 emarticor

它被捆绑的事实是问题，因为我需要它是动态的，并根据需要加载不同的字体 – Simoroshka

@Simoroshka抱歉，我的意思是您可以捆绑您的自定义逻辑，而不是特定的代码段。 – emarticor

动态引用谷歌字体从反应的应用程序

回答

相关问题