動態引用谷歌字體從反應的應用程序

有方法可以包括谷歌字體的項目（無論是通過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

動態引用谷歌字體從反應的應用程序

回答

相關問題