wicked_pdf字体大小在生产中太大 [英] wicked_pdf font size too large in production
本文介绍了wicked_pdf字体大小在生产中太大的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我遇到了一个问题，即渲染的PDF的字体大小在生产中更大.在开发中生成的PDF上，一切看起来都很不错.
I am experiencing an issue where the font sizing for rendered PDFs is larger in production. Everything looks great on the PDF generated in development.
这是开发中的渲染:
以下是制作中的渲染:
这使我很难为开发中的生产服务器格式化文档.你能看看吗?
This is making it very difficult for me to format my document for the production server in development. Can you please take a look?
HTML版本: http://www.hearingtracker.com/tickets/170
PDF下载: http://www.hearingtracker.com/tickets/170.pdf
这是我的控制器动作:
def show
@ticket = Ticket.find(params[:id])
respond_to do |format|
format.html { render :layout => false }
format.pdf do
render :pdf => "HearingTrackerTicket",
:layout => false,
:dpi => '300'
end
end
end
这里是pdf.css.scss
.pdf-body {
background-color: white;
p {
font-size: 12pt;
line-height: 20.5pt;
.underline {
border-bottom: 1pt solid;
}
}
h1 {
margin-top: 0;
font-size: 24pt;
}
h3 {
font-size: 14.25pt;
}
.code {
position: absolute;
top: 23pt;
right: 20pt;
}
.header {
border-bottom: 1pt solid;
}
.content {
.line {
height:30pt;
border-bottom: 1pt solid;
display:block;
}
ul {
list-style-type: none;
height:112pt;
li {
font-size: 12pt;
display: block;
float: left;
height: 22.5pt;
line-height: 17pt;
list-style: none;
margin-right: 20pt;
width:100%;
div {
display: block;
float: left;
border:1pt solid;
width: 15pt;
height: 15pt;
margin-right: 10pt;
}
}
}
ul.horizontal {
height:30pt;
li {
width:auto;
}
}
ul.horizontal-fixed {
height:30pt;
li {
width:250pt;
}
}
}
}
以下是HTML输出(与PDF来源相同):
Here is the HTML output (generated from same source as PDF):
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<style type='text/css'>.pdf-body{background-color:white}.pdf-body h1{margin-top:0;font-size:24pt}.pdf-body h3{font-size:14.25pt}.pdf-body .code{position:absolute;top:23pt;right:20pt}.pdf-body p{font-size:12pt;line-height:20.5pt}.pdf-body p .underline{border-bottom:1pt solid}.pdf-body .header{border-bottom:1pt solid}.pdf-body .content .line{height:30pt;border-bottom:1pt solid;display:block}.pdf-body .content ul{list-style-type:none;height:112pt}.pdf-body .content ul li{font-size:12pt;display:block;float:left;height:22.5pt;line-height:17pt;list-style:none;margin-right:20pt;width:100%}.pdf-body .content ul li div{display:block;float:left;border:1pt solid;width:15pt;height:15pt;margin-right:10pt}.pdf-body .content ul.horizontal{list-style-type:none;height:30pt}.pdf-body .content ul.horizontal li{display:block;float:left;list-style:none;margin-right:20pt;width:auto}.pdf-body .content ul.horizontal li div{display:block;float:left;border:1pt solid;margin-right:10pt}.pdf-body .content ul.horizontal-fixed{list-style-type:none;height:30pt}.pdf-body .content ul.horizontal-fixed li{display:block;float:left;list-style:none;margin-right:20pt;width:250pt}.pdf-body .content ul.horizontal-fixed li div{display:block;float:left;border:1pt solid;margin-right:10pt}
</style>
</head>
<body class="pdf-body">
<div class="header">
<h1>Hearing Tracker Survey</h1>
<span class="code">Code: <strong>a9e78</strong></span>
<p style="border-bottom:1px solid; padding-bottom:17px;">
Thank you for taking the time to review your hearing aid(s) and hearing provider. Your responses will be made available to your hearing provider and to the public (anonymously). <strong>It is important that you answer these questions as honestly as possible.</strong> Your answers will help your provider to improve their practice and help provide valuable feedback to hearing aid manufacturers. For more information please visit <strong>hearingtracker.com</strong>
</p>
<p>
<i>Please complete the included surveys and return to: </i>
</p>
<p>
<strong>Hearing Tracker, Inc <br />
PO Box 40702 <br />
Austin, TX 78704</strong>
</p>
</div>
<div class="content">
<h3 class="section-header">
Hearing Aid Outcome Survey
</h3>
<p style="margin-top:-10px;">
<i>Place a check mark in <span class="underline">one box</span> per question.</i>
</p>
<div class="question">
<p>
1) How much does your hearing aid help you to hear speech in quiet environments?
</p>
<ul>
<li><div></div>Vast improvement with the hearing aid(s)</li>
<li><div></div>Good improvement with the hearing aid(s)</li>
<li><div></div>Slight improvement with the hearing aid(s)</li>
<li><div></div>No improvement with the hearing aid(s)</li>
<li><div></div>I heard better without the hearing aid(s)</li>
</ul>
</div>
<div class="question">
<p>
2) How much does your hearing aid help you to hear speech in noisy situations (restaurants, crowds, etc)?
</p>
<ul>
<li><div></div>Vast improvement with the hearing aid(s)</li>
<li><div></div>Good improvement with the hearing aid(s)</li>
<li><div></div>Slight improvement with the hearing aid(s)</li>
<li><div></div>No improvement with the hearing aid(s)</li>
<li><div></div>I heard better without the hearing aid(s)</li>
</ul>
</div>
<div class="question">
<p>
3) How much does your hearing aid help you to hear speech on the phone?
</p>
<ul>
<li><div></div>Vast improvement with the hearing aid(s)</li>
<li><div></div>Good improvement with the hearing aid(s)</li>
<li><div></div>Slight improvement with the hearing aid(s)</li>
<li><div></div>No improvement with the hearing aid(s)</li>
<li><div></div>I heard better without the hearing aid(s)</li>
</ul>
</div>
<div class="question">
<p>
4) How clear and natural does the hearing aid sound?
</p>
<ul>
<li><div></div>Very clear and natural</li>
<li><div></div>Somewhat clear and natural</li>
<li><div></div>Clear or natural, but not both</li>
<li><div></div>Neither clear nor natural</li>
<li><div></div>The sound is unbearable</li>
</ul>
</div>
<div class="question">
<p>
5) How much does your hearing aid improve your hearing for music?
</p>
<ul>
<li><div></div>Vast improvement with the hearing aid(s)</li>
<li><div></div>Good improvement with the hearing aid(s)</li>
<li><div></div>Slight improvement with the hearing aid(s)</li>
<li><div></div>No improvement with the hearing aid(s)</li>
<li><div></div>I heard better without the hearing aid(s)</li>
</ul>
</div>
<div class="question">
<p>
6) How comfortable is the hearing aid?
</p>
<ul>
<li><div></div>I don't even notice the hearing aid in my ear</li>
<li><div></div>I can feel the hearing aid in my ear, but it's very comfortable</li>
<li><div></div>The hearing aid is slightly uncomfortable after a few hours</li>
<li><div></div>The hearing aid is not comfortable, but I can tolerate it</li>
<li><div></div>The hearing aid hurts my ear</li>
</ul>
</div>
<div class="question">
<p>
7) How reliable is the hearing aid?
</p>
<ul>
<li><div></div>I've had no problems, and expect none in the future</li>
<li><div></div>I've had no problems, but anticipate there might be some in the future</li>
<li><div></div>I've had some issues, but nothing I couldn't take care of myself</li>
<li><div></div>I've had some issues with my hearing aid, but my provider has taken care of it in the clinic</li>
<li><div></div>My hearing aid has been sent offsite for repair by my audiologist</li>
</ul>
</div>
<div class="question">
<p>
8) Does the hearing aid do a good job of stopping unwanted feedback (buzzing and whistling)?
</p>
<ul>
<li><div></div>I never hear feedback from my hearing aid</li>
<li><div></div>My hearing aid creates feedback very rarely</li>
<li><div></div>My hearing aid creates feedback occasionally</li>
<li><div></div>My hearing aid creates feedback often</li>
<li><div></div>My hearing aid creates feedback frequently</li>
</ul>
</div>
<div class="question">
<p>
9) How much does the hearing aid improve your hearing?
</p>
<ul class="horizontal-fixed">
<li><div></div>Vast improvement with the hearing aid(s)</li>
<li><div></div>Good improvement with the hearing aid(s)</li>
<li><div></div>Slight improvement with the hearing aid(s)</li>
<li><div></div>No improvement with the hearing aid(s)</li>
<li><div></div>The hearing aid hurts my ear</li>
</ul>
</div>
<div class="question">
<p style = "clear: both; padding-top: 20px;">
10) How would you rate the value of your hearing aid?
</p>
<ul class="horizontal">
<li><div></div>Excellent value</li>
<li><div></div>Great value</li>
<li><div></div>Good value</li>
<li><div></div>Fair value</li>
<li><div></div>Poor value</li>
</ul>
</div>
<div class="written">
<p>
What would you tell others about your experience with your hearing aid(s)? Please DO NOT review your provider here.
</p>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<p>
More to say? Please continue on the back of this page, or on a separate sheet of paper.
</p>
</div>
<h3 class="section-header">
Provider Survey
</h3>
<div class="question">
<p>
The location was easy to access, pleasant, and professional
</p>
<ul class="horizontal">
<li><div></div>Strongly Agree</li>
<li><div></div>Agree</li>
<li><div></div>Neutral</li>
<li><div></div>Disagree</li>
<li><div></div>Strongly Disagree</li>
</ul>
</div>
<div class="question">
<p>
I was seen in a reasonable amount of time
</p>
<ul class="horizontal">
<li><div></div>Strongly Agree</li>
<li><div></div>Agree</li>
<li><div></div>Neutral</li>
<li><div></div>Disagree</li>
<li><div></div>Strongly Disagree</li>
</ul>
</div>
<div class="question">
<p>
My provider listened to me
</p>
<ul class="horizontal">
<li><div></div>Strongly Agree</li>
<li><div></div>Agree</li>
<li><div></div>Neutral</li>
<li><div></div>Disagree</li>
<li><div></div>Strongly Disagree</li>
</ul>
</div>
<div class="question">
<p>
My provider was knowledgable
</p>
<ul class="horizontal">
<li><div></div>Strongly Agree</li>
<li><div></div>Agree</li>
<li><div></div>Neutral</li>
<li><div></div>Disagree</li>
<li><div></div>Strongly Disagree</li>
</ul>
</div>
<div class="question">
<p>
My provider adequately explained procedures and results
</p>
<ul class="horizontal">
<li><div></div>Strongly Agree</li>
<li><div></div>Agree</li>
<li><div></div>Neutral</li>
<li><div></div>Disagree</li>
<li><div></div>Strongly Disagree</li>
</ul>
</div>
<div class="question">
<p>
My provider solved or offered solutions for my hearing needs
</p>
<ul class="horizontal">
<li><div></div>Strongly Agree</li>
<li><div></div>Agree</li>
<li><div></div>Neutral</li>
<li><div></div>Disagree</li>
<li><div></div>Strongly Disagree</li>
</ul>
</div>
<div class="question">
<p>
I am satisfied with the overall experience
</p>
<ul>
<li><div></div>Strongly Agree</li>
<li><div></div>Agree</li>
<li><div></div>Neutral</li>
<li><div></div>Disagree</li>
<li><div></div>Strongly Disagree</li>
</ul>
</div>
<div class="question">
<p>
I would recommend my provider to a family member or friend
</p>
<ul class="horizontal">
<li><div></div>Strongly Agree</li>
<li><div></div>Agree</li>
<li><div></div>Neutral</li>
<li><div></div>Disagree</li>
<li><div></div>Strongly Disagree</li>
</ul>
</div>
<div class="written">
<p>
Please provide a short review of your hearing professional.
</p>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<p>
More to say? Please continue on the back of this page, or on a separate sheet of paper.
</p>
</div>
</div>
</body>
</html>
推荐答案
wkhtmltopdf可以(并且将)使用系统字体通过其无头wekbkit浏览器呈现内容.
wkhtmltopdf can (and will) use system fonts to render content through its headless wekbkit browser.
因此，您的问题实际上是开发和生产环境不同的问题.
So your issue is really an issue of differing environments in development and production.
如果您可以控制服务器，则可以尝试安装freetype和fontconfig软件包以在服务器上获得额外的字体，或者将字体作为OTF文件提供给样式表:
If you have some control over your server, you might try installing freetype and fontconfig packages to get extra fonts on your server, or serving your fonts in your stylesheets as OTF files like this:
# in application.css.erb
@font-face {
font-family: 'OpenSansRegular';
src: url('<%= font_url('OpenSans.otf') %>');
font-weight: normal;
font-style: normal;
}
并告诉样式表使用它:
body {
font-family: 'OpenSansRegular';
font-size: 13px;
}
如果您没有OTF中的字体，请这里提供了一种将其转换的服务.
If you don't have the font in OTF, here's a service to convert them.
这篇关于wicked_pdf字体大小在生产中太大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
