Laravel9+dompdf生成PDF在iOS16 Safari中字母N显示为倒置i

问题描述 #

基于Laravel 9框架，使用barryvdh/laravel-dompdf扩展生成学生卡PDF时，出现字符渲染异常：字母'N'在PC端显示正常，但在iOS 16系统的Safari浏览器中会显示为倒置的'i'（ᴉ）。预期显示内容为BO MATIN，实际显示不符。

相关代码 #

控制器代码 #

public function recreate_card(Student $student){
    $students[] = $student;
    // return view('templates/student-card', compact('students'));
        
    $pdf = Pdf::loadView('templates/student-card', compact('students'));
    return $pdf->stream('student_card.pdf');
}

HTML模板代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{{ __('Student Card') }}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <style type="text/css" media="screen">
            html {
                font-family: sans-serif;
                line-height: 1;
                margin: 15mm;
                font-size: 1mm;
                /* overflow: hidden; */
            }

            body {
                font-family: "Arial (sans-serif)";
                font-weight: 400;
                line-height: 1.5;
                color: #212529;
                text-align: left;
                background-color: #fff;
                font-size: 3mm;
                padding-top: 15mm;
            }
...
<td class="fw-bold" colspan="2" style="text-align: center; font-size: 3.5mm; color: #014669;">{{ strtoupper($student->first_name).' '.strtoupper($student->last_name) }}</td>
...

异常显示截图 #

解决方法 #

1. 修正字体声明格式 #

模板中body的font-family写法错误，"Arial (sans-serif)"不是标准语法，改为：

body {
    font-family: Arial, sans-serif;
    /* 其他样式保持不变 */
}

错误的字体声明会导致dompdf无法正确识别Arial，fallback到其他字体后在iOS Safari中出现渲染异常。

2. 嵌入完整Arial字体到PDF #

dompdf默认可能未嵌入完整Arial字体，导致不同环境下渲染不一致。操作步骤：

• 下载Arial字体文件（如arial.ttf、arialbd.ttf等），放入项目resources/fonts目录。
• 修改config/dompdf.php配置：

'font_dir' => base_path('resources/fonts/'),
'font_cache' => storage_path('fonts/'),
'font_families' => [
    'arial' => [
        'normal' => 'arial.ttf',
        'bold' => 'arialbd.ttf',
        'italic' => 'ariali.ttf',
        'bold_italic' => 'arialbi.ttf',
    ],
],

• 模板CSS中明确指定使用Arial：

body {
    font-family: 'arial', sans-serif;
}

3. 禁用字体子集化 #

生成PDF时强制嵌入完整字体，避免子集化导致字符缺失：

$pdf = Pdf::loadView('templates/student-card', compact('students'))
    ->setOptions([
        'isFontSubsettingEnabled' => false,
        'defaultFont' => 'arial'
    ]);
return $pdf->stream('student_card.pdf');

4. 明确指定编码 #

生成PDF时显式设置UTF-8编码，确保字符解析正确：

$pdf = Pdf::loadView('templates/student-card', compact('students'))
    ->setOptions(['encoding' => 'UTF-8']);

内容的提问来源于stack exchange，提问作者Khean