カスタム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

問題はいくつかのうちの1つになる可能性があります。より多くの情報を提供する必要があります。 HTMLページでインライン展開した最初のSVGですか、それともスタンドアロンの外部 ".svg"ファイルですか？後者の場合、適切な 'Content-type'（' image/svg + xml'）でSVGファイルを提供しているWebサーバーですか？それがインラインであれば、どのブラウザを使用していますか？あなたは他人を試しましたか？それは手がかりを与えることができます。あなたがブラウザのプライバシールールにぶつかっている可能性もあります。 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" 
>

* <html>タグ内のSVGは、この仕様を必要としません。

出典

2017-05-15 09:40:19 llobet

答えて

関連する問題