ruby-on-rails - wicked_pdf 字体大小在生产中太大-6ren

ruby-on-rails - wicked_pdf 字体大小在生产中太大

转载作者：行者123 更新时间：2023-12-05 03:14:10

我遇到了一个问题，即呈现的 PDF 的字体大小在生产中较大。在开发中生成的 PDF 上，一切看起来都很棒。

这是开发的效果图:

enter image description here

这是来自生产的渲染:

enter image description here

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

HTML 版本:http://www.hearingtracker.com/tickets/170

PDF下载:http://www.hearingtracker.com/tickets/170.pdf

这是我的 Controller Action :

  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>

最佳答案

wkhtmltopdf 可以(并且将会)使用系统字体通过其 headless wekbkit 浏览器呈现内容。

所以你的问题实际上是开发和生产环境不同的问题。

如果你对你的服务器有一些控制，你可以尝试安装 freetype 和 fontconfig 包来在你的服务器上获得额外的字体，或者在你的样式表中提供你的字体作为像这样的 OTF 文件:

# 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 .

关于ruby-on-rails - wicked_pdf 字体大小在生产中太大，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26694543/

文章推荐： r - 将数据框折叠成单行并根据行 R 创建新列

文章推荐： ajax - Flask中如何判断是否是AJAX请求

文章推荐： php json编码大数组被截断

文章推荐： django - 新模式关系

c - 大小(数组)/大小(整数)
这个问题在这里已经有了答案: C sizeof a passed array [duplicate] (7 个回答) 8年前关闭。在一个函数中，我声明了一个数组: int char_count_ar
linux - 为什么文件系统有自己的 block 大小，而不是使用硬盘 block 大小？
简而言之，文件系统如何与 block 设备通信？最佳答案我对 block 大小不太了解。我认为 ext4(Linux)的文件系统的 block 大小是 4KB，考虑到现代处理器的页面大小(4KB)
mysql - tinyint(大小)，varchar(大小): "size" explaination
我知道 tinyint(1) 和 tinyint(2) 具有相同的存储空间范围。唯一的区别是显示宽度不同。这是否意味着 tinyint(1) 将存储所有类型的整数但只正确显示 0 到 9 的范围？而
c++ - 大小 8 的无效读取，大小 8 的无效写入 (Valgrind)
今晚我已经研究了以下代码几个小时，但我只是摸不着头脑。当使用函数从标准输入填充数组时，我不断收到“大小 8 的无效写入”和“大小 8 的无效读取”。如有任何帮助，我们将不胜感激...我知道 Sta
c - 大小 8 的无效读取，大小 8 的无效写入，C
我有一个 valgrind 错误，我不知道如何摆脱它们: ==5685== Invalid read of size 8 ==5685== at 0x4008A1: main (in /home
Hadoop block 大小 vs 拆分 vs block 大小
我对 Hadoop 的概念有点困惑。 Hadoop block 大小、拆分大小和 block 大小之间有什么区别？提前致谢。最佳答案 block 大小和 block 大小相同。拆分大小可能与
javascript - 超过 localStorage 配额(localStorage 大小!= 文件下载大小)& 如何检查 localStorage 大小
我想不出一个好的标题，所以希望可以。我正在做的是创建一个离线 HTML5 webapp。 “出于某些原因”我不希望将某些文件放在缓存 list 中，而是希望将内容放在 localStorage 中。
xamarin - 减少 Xamarin.Forms 中的 APK 大小，APK 大小 80MB
无法将 xamarin apk 大小减少到 80 MB 以下，已执行以下操作: 启用混淆器配置:发布平台:事件(任何 CPU)。启用 Multi-Dex:true 启用开发人员检测(调试和分析)
python - 读取多个 csv 文件(大小 mxm)并加载为 n 维数组(大小 nxmxm)(不连接)
我正在开发一个程序，需要将大量 csv 文件(数千个)加载到数组中。 csv 文件的尺寸为 45x100，我想创建一个尺寸为 nx45x100 的 3-d 数组。目前，我使用 pd.read_csv(
react-native - Flutter apk/ipa 大小 vs React Native apk/ipa 大小
Hello World 示例的 React Native APK 大小约为 20M (in recent versions)，因为支持不同的硬件架构(ARMv7、ARMv8、X86 等)，而同一应用程
python - 将 n 个元素(大小 = 2 字节，十进制)的列表拆分为 2n 个元素(大小 = 1 字节，十六进制)
我有一个包含 n 个十进制元素的列表，其中每个元素都是两个字节长。可以说: x = [9000 , 5000 , 2000 , 400] 这个想法是将每个元素拆分为 MSB 和 LSB 并将其存储在
GtkTextView 大小
如何设置 GtKTextView 的大小？我想我不能使用 gtk_widget_set_usize。最佳答案您不能直接控制小部件的大小，而是由其容器完成。您可以使用 gtk_widget_set_
具有函数的结构的c++大小
这个问题在这里已经有了答案: c++ sizeof() of a class with functions (7 个答案) 关闭 5 年前。结果是 12。 foobar 函数存储在内存中的什么位置
image - 为什么图像序列比源视频大(大小)？
当我在 ffmpeg(或任何其他程序)中使用这样的命令时: ffmpeg -i input.mp4 image%d.jpg 所有图像的组合文件大小总是比视频本身大。我尝试减少每秒帧数、降低压缩设置、模
clojurescript 高级编译 - 大小
我是 clojurescript 的新手。高级编译后出现“77 KB”的javascript文件是否正常？我有一个 clojurescript 文件: 我正在使用 leinigen: lein c
Qt QPixmap 大小
我想要一个 QPixmap尺寸为 50 x 50。我试过 : QPixmap watermark(QSize(50,50)); watermark.load(":/icoMenu/preparati
卷积层的 tensorflow 大小
我正在尝试从一篇研究论文中重新创建一个 cnn，但我对深度学习还是个新手。我得到了一个大小为 32x32x7 的 3d 补丁。我首先想执行一个大小为 3x3 的卷积，具有 32 个特征和步幅为 2。
iPhone如何在旋转设备时正确调整 View 大小
我一直在尝试调整 View Controller 内的 View 大小，但到目前为止没有运气。基本上，我的 View 最底部有一个按钮，当方向从纵向更改为横向时，该按钮不再可见，因为它现在太靠下了。
javascript - 上传前检查图像尺寸/大小
如何使用此功能检查图像的尺寸？我只是想在上传之前检查一下... $("#LINK_UPLOAD_PHOTO").submit(function () { var form = $(this);
二叉搜索树上的 JavaScript 大小
我用 C++ 完成了这个，因为你可以通过引用传递参数。我无法弄清楚如何在 JavaScript 中执行此操作。我的代码需要更改什么？我的输出是1 this.sizeOfBst = function()

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

ruby-on-rails - wicked_pdf 字体大小在生产中太大