自定義SVG字體

我的問題是關於在SVG文件中使用自定義字體在網站上顯示徽標。我遇到了很大的困難，使用多個選項來使字體正常工作，因爲它們沒有顯示在實時網站上。但是，他們在本地工作。自定義SVG字體

我使用顯示SVG標誌的HTML標記是：

<svg width="263" height="26"> 
    <image xlink:href="/images/header-logo.svg" src="/images/fallback.png" width="263" height="26" /> 
</svg>

而對於SVG字體，我將在SVG文件本身的部分如下。

<style type="text/css"> 
    @font-face { 
     font-family: 'Font-Name'; 
     font-weight: 500; 
    font-style: normal; 
     src: url('fonts/My-Chosen-Font.woff') format('woff'); 
    } 

    #text { 
     font-family: 'Font-Name'; 
     font-weight: 700; 
     fill: #424242; 
     } 
</style>

而對於元素：

<text font-size="34"> 
    <tspan x="29" y="34" id="text" style="font-family: 'Font-Name';">Company</tspan> 
</text>

任何幫助深表感謝，感謝先進。

來源

2017-05-14 Gatty

你的問題可能是幾件事情之一。您需要提供更多信息。是第一個列在HTML頁面中的SVG，還是獨立的外部「.svg」文件？如果是後者，你的web服務器是否提供正確的'Content-type'（'image/svg + xml'）來提供SVG文件？如果內聯，您正在使用哪個瀏覽器？你嘗試過別人嗎？這可以提供線索。瀏覽器隱私規則也有很大的可能性。請參閱SVG2規範的[安全靜態模式]（https://svgwg.org/svg2-draft/single-page.html#conform-secure-static-mode）部分。 –

我已經創建了一個似乎可以工作的筆 - 讓我知道這是否有幫助。它基於https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan的頁面。

<?xml version="1.0"?> 
<svg width="290" height="40" viewBox="0 0 250 40" 
    xmlns="http://www.w3.org/2000/svg" version="1.1"> 

    <style> 
<![CDATA[ 
text{ 
    font: 34px 'Ravi Prakash', cursive; 
} 
]]> 
    </style> 

    <text x="29" y="34" id="text">Company</text> 
    </text> 
</svg> 
<p>Read all about it.</p>

CSS：

@import url('https://fonts.googleapis.com/css?family=Ravi+Prakash'); 
html { 
    font-family: 'Ravi Prakash', cursive; 
}

來源

2017-05-14 23:06:55 WahhabB

嗨WahhabB，感謝您的回覆。不幸的是，我們使用的字體在Google字體上不可用，因此使用「src：url（'fonts/My-Chosen-Font.woff'）格式（'woff'）;」，我開始思考SVG格式可能不支持在外部使用這種字體？這是否是一個正確的假設，或者最好是使用PNG或Google字體呢？ – Gatty

自定義字體絕對可以在SVG中使用。 –

如果您使用的是像您必須聲明與鏈接能力的SVG圖像或字體的任何外部鏈接。

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
>

* SVG內部<html>標籤不需要此規格。

來源

2017-05-15 09:40:19 llobet

自定義SVG字體

回答

相關問題