zcy
/
websch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
websch/method-draw/font-files/test.html

63 lines
2.3 KiB
HTML
Raw Normal View History

font test
2012-07-31 22:46:08 +00:00
<!DOCTYPE HTML>
font face case test
2012-07-31 23:41:29 +00:00
<html lang="en-En">
font test
2012-07-31 22:46:08 +00:00
<head>
<meta charset="UTF-8">
font face case test
2012-07-31 23:41:29 +00:00
<title>SVG @font-face Test</title>
font test
2012-07-31 22:46:08 +00:00
</head>
<body>
font face case test
2012-07-31 23:41:29 +00:00
<h2>@font-face in SVG</h2>
<p style="width: 500px"><strong>Problem:</strong> I'm trying trying to place an images in svg format with custom fonts. It works in <code>svg</code> but not in <code>img</code>. If you open the image in a new tab you will see it rendered with the proper font. The font is served from this same website in this directory.</p>
font face case test
2012-07-31 23:54:16 +00:00
<a href="test_ff.svg">Link to the test.svg</a>
font face case test
2012-07-31 23:41:29 +00:00
<table>
<tr><td>
<svg width="500" height="200" version="1.1" xmlns = 'http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 200">
<defs>
<style type="text/css">
@font-face {
font-family: 'Arvo';
font-style: normal;
font-weight: normal;
src: url(arvo-regular-webfont.woff) format('woff');
}
</style>
</defs>
<rect x="0" y="0" height="100" width="500" fill="#eee" />
<text x="20" y="50" font-family="Arvo" font-weight="normal" font-size="32">Text using CSS @font-face</text>
</svg>
</td>
<td>
<pre>
&lt;svg width=&quot;500&quot; height=&quot;200&quot; version=&quot;1.1&quot; xmlns = &#39;http://www.w3.org/2000/svg&#39; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; viewBox=&quot;0 0 500 200&quot;&gt;
&lt;defs&gt;
&lt;style type=&quot;text/css&quot;&gt;
@font-face {
font-family: &#39;Arvo&#39;;
font-style: normal;
font-weight: normal;
src: url(arvo-regular-webfont.woff) format(&#39;woff&#39;);
}
&lt;/style&gt;
&lt;/defs&gt;
&lt;rect x=&quot;0&quot; y=&quot;0&quot; height=&quot;100&quot; width=&quot;500&quot; fill=&quot;#eee&quot; /&gt;
&lt;text x=&quot;20&quot; y=&quot;50&quot; font-family=&quot;Arvo&quot; font-weight=&quot;normal&quot; font-size=&quot;32&quot;&gt;Text using CSS @font-face&lt;/text&gt;
&lt;/svg&gt;
</pre>
</td>
</tr>
<tr>
<td><img src="test_ff.svg" width="500" height="200" /></td>
<td style="verical-align: top;">
<pre>
&lt;img src="test_ff.svg" width="500" height="200" /&gt;
</pre>
</td>
</tr>
</table>
font test
2012-07-31 22:46:08 +00:00
</body>
</html>