整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前端开发过程中难免会用到特殊字体，如何引入特殊字体？
@font-face {
font-family: 'icomoon'; // 这里自定义字体名称
src: url('fonts/icomoon.eot?'); // 文件路径或者服务器路径
src: url('fonts/icomoon.eot?') format('embedded-opentype'), // format属性：字体的格式 主要用于浏览器识别
url('fonts/icomoon.ttf?') format('truetype'),
url('fonts/icomoon.woff?') format('woff'),
url('fonts/icomoon.svg?') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
/* 调用 */
body{
font-family:'icomoon'
}
注：eot为IE专用，ttf官方说是苹果和微软为PostScript 而开发的字体格式，个人理解为通用格式。woff是压缩过后轻量级，svg对文本支持不太好
ss怎么引入html
在HTML中引入CSS的方法主要有四种：
1. 内联方式：直接在HTML标签中的style属性中添加CSS，即采用行内样式。例如：<p style="color:red;">这是红色文字</p>。这种方式的优点是可以直接在HTML文件中看到效果，但缺点是不够模块化，不便于复用和维护。
2. 内嵌样式：使用<style>标签在HTML文档头部（<head>和<head>之间）定义CSS样式。例如：
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是红色文字</p>
</body>
这种方式的优点是可以将CSS样式与HTML内容分离，提高代码可读性，但同样存在复用和维护的问题。
3. 链接式：使用<link>标签引入外部CSS样式表文件。具体操作步骤如下：新建一个HTML文件和一个CSS文件，将新建的CSS文件保存在一个文件夹中，回到HTML文件中，在<title><title>下方添加<link>标签并设置其属性为CSS文件的路径，保存后便实现了引入外部CSS文件。这种方式的优点是可以实现代码的复用和维护，但需要提前准备好CSS文件。
4. 导入式：使用@import命令导入外部CSS样式表。例如：<style type="text/css"> @import"mystyle.css"; </style>。需要注意的是，这里的路径需要是正确的。这种方式可以在同一个HTML文件中引入多个CSS文件，但浏览器对@import的支持程度不同，可能会出现兼容性问题。
据 《Adobe 2020年的技术传播行业趋势调查》， PDF 格式在内容发布的的格式选择排名最靠前，紧随其后的是 HTML5 格式。 受到诸多客户的需求鼓舞，本文揭示了如何应用 CSS 技术装扮您的 PDF 和 HTML 格式文档。
/*
* ==============================================
* 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 标准操作指南感兴趣，请联系我们。
*请认真填写需求信息，我们会在24小时内与您取得联系。
