根据 《Adobe 2020年的技术传播行业趋势调查》， PDF 格式在内容发布的的格式选择排名最靠前，紧随其后的是 HTML5 格式。 受到诸多客户的需求鼓舞，本文揭示了如何应用 CSS 技术装扮您的 PDF 和 HTML 格式文档。

工作准备

1. Oxygen XML Author/Editor 23.1
2. DITA 源文件 和 DITA Map

实施步骤

1. 新建 CSS 代码，如下示意：

/*

* ==============================================

* Skin for oXygen generated WebHelp.

* ==============================================

*/

/*

* ------------------------------------------------------------------

*

* Fonts.

*

*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');

html, body {

min-width:100%;

}

body{

font-family: "Noto Sans SC";

}

2. 命名 CSS 为 oxygen-font.CSS 后将 CSS 引入发布流程，方法如下：

在 Oxygen 编辑器 Editor 或 Author 引入 OPT 配置文件 ，具体内容如下

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<publishing-template>

<name>SampleCustomer</name>

<description>demo</description>

<webhelp>

<preview-image file="logo.png"/>

<parameters>

<parameter name="webhelp.show.main.page.tiles" value="no"/>

<parameter name="webhelp.show.main.page.toc" value="yes"/>

<parameter name="webhelp.top.menu.depth" value="3"/>

<parameter name="args.figurelink.style" value="TITLE"/>

<parameter name="args.tablelink.style" value="TITLE"/>

<parameter name="force-unique" value="true"/>

</parameters>

<resources>

<css file="oxygen-font.css"/>

<css file="notes.css"/>

<fileset>

<include name="resources/**/*"/>

<exclude name="resources/**/*.svn"/>

<exclude name="resources/**/*.git"/>

</fileset>

</resources>

<online-preview-url>https://www.oxygenxml.com/samples/DITA-WebHelp-Responsive/tree/oxygen-red/</online-preview-url>

<tags>

<tag type="layout">tree</tag>

<tag type="color">red</tag>

<tag type="color">light</tag>

</tags>

</webhelp>

</publishing-template>

3. 分别在 Oxygen 编辑器选中上述配置文件后发布 HTML 和 PDF 格式文档

4. 验证字体实施效果，如下图示意：

如果您对 Oxygen 环境下如何用 CSS 技术装扮您的公司产品手册，业务文档，如 QMS 质量管理体系文档 ， SOP 标准操作指南感兴趣，请联系我们。