MPDF中内联字体大小不生效问题排查及解决方案咨询

Let’s break down why your inline font sizes aren’t taking effect and fix this issue step by step.

Common Causes & Fixes #

1. CSS Specificity Conflict with .common-block #

The most probable reason is that your style_pdf_custom.css file’s .common-block class already defines a font-size property. mPDF prioritizes styles from external stylesheets over inline styles in some edge cases (even though inline styles should technically have higher specificity—mPDF’s parser has quirks).

Fix:

• First, open style_pdf_custom.css and check if .common-block includes a fixed font-size rule. If it does, remove it or set it to a default value that can be overridden.
• Instead of relying on inline font sizes, create utility classes for font sizes in your stylesheet (this keeps your absolute positioning rules in the stylesheet as required):

  /* style_pdf_custom.css */
  .common-block {
    position: absolute; /* Your required absolute positioning properties */
    /* Remove any fixed font-size here */
  }
  
  .fs-22 {
    font-size: 22px;
  }
  
  .fs-24 {
    font-size: 24px;
  }
  

• Update your $pdf_html to use these utility classes:

  $pdf_html = '<div class="common-block fs-22" style="width:203px; left:158px;top:243px;height:28px;justify-content: left;color:black;font-weight: bold; "> Mr. Admin</div>
  <div class="common-block fs-24" style="width:247px; left:739px;top:365px;height:40px;justify-content: left;color:black; ">Checking Font Size</div>';
  

2. mPDF’s Inline Style Parsing Quirks #

Older versions of mPDF have known issues with parsing inline styles correctly. If you’re using an outdated version, upgrading to the latest stable release might resolve the problem.

3. Font Loading Issues #

If your custom fonts aren’t loading properly, mPDF will fall back to a default font, which might make it seem like your font size isn’t working. Verify your font setup:

• Ensure the font files are in the correct $storage_path.'/fonts' directory.
• Add a font-family rule to .common-block in your stylesheet to enforce using your custom fonts:

  .common-block {
    position: absolute;
    font-family: 'greatvibes', sans-serif; /* Or your preferred font */
  }
  

4. Force Inline Styles with !important (Last Resort) #

If you need a quick fix and can’t adjust the stylesheet immediately, add !important to your inline font-size declarations. While this isn’t ideal for maintainability, it can override conflicting styles in mPDF:

$pdf_html = '<div class="common-block" style="width:203px; left:158px;top:243px;height:28px;justify-content: left;color:black;font-size:22px !important;font-weight: bold; "> Mr. Admin</div>
<div class="common-block" style="width:247px; left:739px;top:365px;height:40px;justify-content: left;color:black;font-size:24px !important; ">Checking Font Size</div>';

Verification Tip #

After making changes, generate a test PDF and inspect the rendered elements. You can also enable mPDF’s debug mode temporarily to check if styles are being applied correctly (add 'debug' => true to your mPDF config array).

内容的提问来源于stack exchange，提问作者Md. Ziyed Uddin