Wordpress中的SVG字母間距

Question

我向客戶的Wordpress網站添加了一個SVG圖形。然而，圖形中有奇怪的空間......字母聚集在一起，在某些情況下，字母之間有大的空間。說實話，我不知道很多關於SVG文件的內容，除了它們很好地擴展之外。這個問題似乎隻影響文字。任何想法爲什麼發生這種情況？

Answer 1

首先，爲了使事情更容易理解一些：SVG文件格式是一種XML方言，就像HTML。您可以在任何文本編輯器中打開並編輯它，或者使用PHP動態生成它。它與HTML共享很多特徵，例如使用樣式表。如果SVG文件想要顯示文本，則必須使用已安裝的系統字體，或者需要在其樣式表中引用網頁字體。

這就是這裏發生的事情：你的SVG文件需要使用webfont Lato，但它沒有被正確引用。因此，使用替換字體，並且SVG中定義的一些字母定位調整不再起作用。

網頁實際上在主網站中引用，但SVG文件無法訪問該定義。他們的樣式表彼此隔離。

要解決這個問題，我會給你兩個解決方案。選擇一個你感覺舒服的人。

1.寫SVG文件嵌入到網頁

SVG文件的源代碼可以 - 或多或少不變 - 寫入到HTML文件的中間。通過這種方式，SVG內容可以訪問頁面的樣式表，從而訪問網頁字體。

請注意，所有樣式表都適用，所以可能會發生這種情況，由於不幸的命名衝突，SVG內容的某些方面可能會改變其外觀。坦率地說，你必須嘗試一下。

爲了實現嵌入式嵌入，幸運的是還有一些Worpress插件。快速搜索顯示SVG Support，但也可能有其他。使用這個插件，你只需要添加一個類style-svg到你的圖片標籤中，然後這個插件會將它插入到內嵌的SVG內容中。請注意，我沒有測試過它。

2. web字體添加到SVG文件

對於這一點，你必須在你選擇的編輯器打開SVG文件。不幸的是，該文件有點緊湊，寫入時沒有任何換行符。如果它被寫美化，前幾行是這樣的：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 287.76 187.31" /> 
    <defs> 
    <style>...</style> 
</defs> 

添加以下剛開盤後<defs>標籤和<style>標記之前：

<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic&#038;subset=latin,latin-ext" type="text/css" />