我有一个在Chrome中显示正常的SVG,但是当我在HTML页面中使用它时,它不使用正确的字体,而是使用默认字体.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">
<![CDATA[
/* latin-ext */
@font-face {
font-family: 'Roboto-Black';
src: url(./Roboto-Black.ttf)
}
]]>
</style>
</defs>
<text style="font-family: 'Roboto-Black'; font-weight:normal;" transform="matrix(1, 0, 0, 1, 239.2, 51.394)">
<tspan x="-101.469" y="27" font-family="Roboto-Black" font-size="72" fill="#000000">TEST</tspan>
</text>
</svg>
Run Code Online (Sandbox Code Playgroud)
SVG在Chrome中显示正常,但在HTML页面中显示时,它不使用正确的字体.
<html>
<head></head>
<body>
<img src="test.svg" width="100%">
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我错过了什么?
附录:虽然下面提供了一个有效的解决方案,但我发现将svg代码直接包含在html中更容易,而不是引用svg文件.这样就不会出现问题.
我正在使用点燃格式KF8进行我的第一步.在发布准则,该格式支持CSS3状态:
早期的Kindle平台为层叠样式表(CSS)提供了非常基本的支持.这在KF8中得到了显着增强,支持CSS 2/CSS 3.
现在这似乎是"非常基本的":我想在表格单元格中对齐文本.比较Chrome与kindlegen 2.9/Kindle Previewer 2.94的输出.Kindle Preview完全忽略了对齐.
我究竟做错了什么?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Table sample</title>
<meta charset="utf-8" />
<style>
td.right {
padding: 2px 4px;
text-align : right;
}
td.left {
padding: 2px 4px;
text-align : left;
}
td.center {
padding: 2px 4px;
text-align : center;
}
h2 { color: green; }
</style>
</head>
<body>
<a name="part2_chap1"/>
<article role="main">
<header class="chapter">
<hgroup>
<h2>ALIGNMENT</h2>
</hgroup>
</header>
<div class="epigraph">
<p class="noind">How to right align table data</p>
</div>
<section class="table" …Run Code Online (Sandbox Code Playgroud) 在Spring Boot应用程序中,我尝试使用名称空间设置属性。这是我尝试过的:
<svg id="svg1" width="100%" viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"
xmlns:th="http://www.thymeleaf.org"
xmlns:xlink="http://www.w3.org/1999/xlink">
...
<image th:attr="x=${thumbx},xlink:href=${thumbfile}"
x="150" y="50" width="20" height="20"
xlink:href="http://s3.amazonaws.com/some.png"/>
...
</svg>
Run Code Online (Sandbox Code Playgroud)
这将引发org.thymeleaf.exceptions.TemplateProcessingException:无法解析为分配序列:“ x = $ {thumbx},xlink:href = $ {thumbfile}”。
关于如何设置属性xlink:href的任何想法?
我使用iText7生成PDF,然后在新选项卡中打开它.
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.parseMediaType("application/pdf"));
String filename = "C:\\temp\\first-output2.pdf";
headers.add("content-disposition", "inline;filename=" + filename);
headers.setCacheControl("must-revalidate, post-check=0, pre-check=0");
Run Code Online (Sandbox Code Playgroud)
用户的意图总是打印,因此显示PDF并让他点击打印按钮是不方便的.这就是我想在PDF打开时立即打开打印对话框的原因.
这个解决方案不起作用
因为iText7中不存在PdfAction.PRINTDIALOG.
我也尝试了各种不起作用的JavaScript选项,比如
PdfAction action = PdfAction.createJavaScript("this.print(true);\\r");
Run Code Online (Sandbox Code Playgroud)
如何在页面加载后直接打开打印对话框?