dav*_*qet 14 html css fonts svg
我正在使用<object>标签在我的页面中嵌入SVG ,他们应该使用Google字体(例如Roboto).但是,SVG不会选择这些字体,而是默认使用系统字体.
我究竟做错了什么?每个SVG都要求嵌入字体<style>吗?
示例代码:
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
</head>
<body>
<object width="250" height="200" type="image/svg+xml" data="img/popup_image.svg"></object>
</body>
Run Code Online (Sandbox Code Playgroud)
SVG片段:
<text font-size="14" fill="#333" font-family="Roboto">Words go here</text>
Run Code Online (Sandbox Code Playgroud)
小智 22
浏览器将SVG文本视为常规HTML文本.换句话说,SVG中的任何文本元素都必须像普通的HTML元素一样(例如<span>,像a ).您需要以CSS的形式将您的字体嵌入SVG中@import.查看SVG的XML以了解该<defs>部分.然后,将此代码添加到其中:
<defs>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic');
</style>
</defs>
Run Code Online (Sandbox Code Playgroud)
接下来,将您的<text>元素更新为:
<text font-size="14" fill="#333" style="font-family: 'Roboto';">
Words go here
</text>
Run Code Online (Sandbox Code Playgroud)
如果您想了解更多相关信息,可以试试这个网站:http://nimbupani.com/about-fonts-in-svg.html.它有一些关于嵌入式SVG中字体的非常好的信息.这方面的一个工作示例可以在这里找到:https: //github.com/marians/test-webfonts-in-svg.
如果您要使徽标可移植并可以脱机使用,则应提供一些建议,您应该使用并嵌入尽可能小的字体。
首先,通过仅拉动笔触粗细和实际需要的字符来优化字体大小。
所以代替这个:
https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italicRun Code Online (Sandbox Code Playgroud)
压缩选项,并添加?text=abc参数以仅捕获字形的子集,如下所示:
https://fonts.googleapis.com/css?family=Roboto:700&text=Words%20go%20hereRun Code Online (Sandbox Code Playgroud)
在您的svg中,您可以@font-face在样式表的<defs>标记中包含一个声明,如下所示:
<defs>
<style>
@font-face {
font-family: "Sample font";
src: url("data:application/font-woff;charset=utf-8;base64,<b64>") format("woff2");
}
</style>
</defs>Run Code Online (Sandbox Code Playgroud)
通过导航到Google字体样式表并下载实际的.woff2文件来获取文件。您可以使用base64-encoder将其转换为b64字符串,或者在将网络字体转换和呈现为base64上阅读更多内容。取该字符串并将其包含在文件中。为了清楚起见,您还可以在字体表面上指定unicode范围,以明确表示您仅输入了一些字符
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 280 140" width="300">
<defs>
<style>
/* https://fonts.googleapis.com/css?family=Patrick+Hand&text=KAM */
@font-face {
font-family: 'Patrick Hand';
/* src: url(https://fonts.gstatic.com/l/font?kit=LDI1apSQOAYtSuYWp8ZhfYeMXNDN0vF8&skey=7fb0ea6515a61339&v=v11) format('woff2') */
src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff2');
unicode-range: U+004B, U+0041, U+004D
}
text {
font-size: 140px;
font-family: 'Patrick Hand', cursive;
font-weight: 700;
}
</style>
</defs>
<text x="51" y="132" rotate="-30">K</text>
<text x="100" y="100" rotate="0">A</text>
<text x="150" y="95" rotate="30">M</text>
</svg>Run Code Online (Sandbox Code Playgroud)
另请参阅: