Question

我遇到的问题是渲染的PDF的字体大小生产中的。在开发过程中生成的PDF看起来很棒。

以下是开发：
的渲染

以下是生产的渲染：

这使我很难在开发中为生产服务器格式化我的文档。你能看一下吗？

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相同的源生成）：

<!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>

Answer 1

wkhtmltopdf可以（并且将）使用系统字体通过其无头wekbkit浏览器呈现内容。

因此，您的问题实际上是开发和生产环境不同的问题。

如果您可以控制服务器，可以尝试安装freetype和fontconfig软件包以获取服务器上的额外字体，或者将样式表中的字体作为OTF文件提供：< / p>

# 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中的字体here's a service to convert them。

wicked_pdf字体大小太大了

1 个答案: