HTML页面仿WORD样式

公司要求不再浏览器中添加office插件的前提下。展示WORD文档中的内容要求一一对应。经过查询资料以及调整,得出如下相关资料:

1  标题样式:

目录 -- 宋体 小二 加粗

一级标题 -- 微软雅黑 四号 加粗 <div style="font-family:微软雅黑;font-size:19px;font-weight: bold;">1  XXX</div>

二级标题 -- 微软雅黑 小四 加粗 <div style="font-family:微软雅黑;font-size:16px;font-weight: bold;">1.1  XXX</div>

三级标题 -- 微软雅黑 小四 加粗 <div style="font-family:微软雅黑;font-size:16px;font-weight: bold;">1.1.1  XXX</div>

表格标题 -- 宋体 五号 加粗  <div style="text-align:center;font-family:宋体;font-size:14px;font-weight: bold;"> </div>

正文文本 -- 宋体 小四 <div style="text-indent:25px;line-height:35px;height:auto;font-family:宋体;font-size:16px;"></div>

2  style  部分标签:

加粗:font-weight: bold;
斜体:font-style: italic;
font-style:设定字体样式。normal 默认/italic,oblique斜体;
font-weight:设定字体粗细。normal 默认/bold 粗体/bolder 比bold更粗/lighter 比较细的字体
font-size:设定字体大小。字体大小 可以用px表示 默认字体大小为 12px
font-family:设定字体/“微软雅黑”/“宋体”/“黑体”

3  字号、pt、px、em换算对照表:

初号 42pt 56px 3.5em

小初 36pt 48px 3em

34pt 45px 2.75em

32pt 42px 2.55em

30pt 40px 2.45em

29pt 38px 2.35em

28pt 37px 2.3em

27pt 36px 2.25em

一号 26pt 35px 2.2em

25pt 34px 2.125em

小一 24pt 32px 2em

二号 22pt 29px 1.8em

20pt 26px 1.6em

小二 18pt 24px 1.5em

17pt 23px 1.45em

三号 16pt 22px 1.4em

小三 15pt 21px 1.3em

14.5pt 20px 1.25em

四号 14pt 19px 1.2em

13.5pt 18px 1.125em

13pt 17px 1.05em

小四 12pt 16px 1em

11pt 15px 0.95em

五号 10.5pt 14px 0.875em

10pt 13px 0.8em

小五 9pt 12px 0.75em

8pt 11px 0.7em

六号 7.5pt 10px 0.625em

7pt 9px 0.55em

小六 6.5pt 8px 0.5em

七号 5.5pt 7px 0.4375em

八号 5pt 6px 0.375em

(部分内容摘抄自他人撰写内容,如有意见请联系作者更改)

时间: 2024-08-23 20:45:48

HTML页面仿WORD样式的相关文章

asp.net页面读取word文档内容显示

用asp.net实现对指定word文档内容的读取显示该如何实现?比如左边读取指定文件夹中所有的word文档,以文档的标题作为链接,点击文档标题则在右边某位置显示出该word文档中的内容(包括字体样式,图片显示等). 可以这样实现: 操作WORD配置说明 引入:Word的对象库文件“MSWORD.OLB”(word 2000为MSWORD9.OLB) 1.运行Dcomcnfg.exe 2.组件服务――计算机――我的电脑――DCOM配置――找到microsoft word 文档 3.点击属性 4.选

JS实战 &#183; 仿css样式选择器

代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>仿css样式选择器</title> <style type="text/css"> #textid{ height: 100px; width: 300px; } #fontid{ heig

WPF仿Word头部格式,涉及DEV RibbonControl,NarvbarControl,ContentPresenter,Navigation

时隔1个月,2015/06/17走进新的环境. 最近一个星期在学习仿Word菜单栏的WPF实现方式,废话不多说,先看一下效果. 打开界面后,默认选中[市场A],A对应的菜篮栏入上图, 选择[市场B]后讲改变菜单栏,和B相应的界面. 要实现上述的功能,要怎么解决? 实际上,每个界面都可以看成有三部分组成,顶部的DEV.RibbonControl,左侧的DEV.NavbarControl,和中间显示主要界面C部分. NavBarControl中包含多个NavBarItem,当切换NavBarItem

一款基于的jQuery仿苹果样式焦点图插件

这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款jQuery焦点图插件非常适合在产片展示的网页上使用. 在线预览   源码下载 接下来我们一起分享一下实现这款苹果焦点图的过程及源码. HTML代码: <div id="gallery"> <div id="slides" style="wi

动态为页面添加CSS样式文件引用

动态为页面添加CSS样式文件引用: 1 if (document.createStyleSheet) { //IE 2 document.createStyleSheet("./Themes/Default/MessageTip.css"); 3 } 4 else { //Firefox, Chrome 5 var stylesheet = document.createElement("link"); 6 stylesheet.href = "./The

ADF页面的输出样式

JDev version: 11.1.2.0.0 ADF页面的打印样式.邮件样式通常比普通样式简单,打印时有许多不需要显示的内容(按钮.滚动条),邮件样式尽可能简单以便在邮件中正常操作. 可以使用ADF提供的变量adfFacesContext.outputMode来控制组件是否显示显示: <af:activeImage source="/images/stockChart.gif" rendered="#{adfFacesContext.outputMode != &q

分享一个Delphi制作的文档编辑器源代码(仿Word)

功能挺多的,就是很多地方都没有完善.不过简单使用,是没有问题的. 我也忘记是在哪个网站下载的,可能是Git国外的网站. 仿Word文档编辑器,不过其实没有必要的,因为用户会直接使用微软或者其他软件来制作自己的文档. 但是却具有参考价值,虽然代码需要优化的地方还有很多.比如那些添加控件这些可以去除,把代码结构处理得紧凑一些,而且增加更多可以自定义的地方就更理想了. 其实大家最最讨厌都是一些滚动条和控件背景颜色都无法自定义,都被写得死死的,就像原来Vcl那些玩意一样.想弄个自定义界面都办不到.这套代

如何将 Word 样式转换为 InDesign 样式

将 Microsoft Word 文档导入 InDesign 或 InCopy 中时,可以将 Word 中使用的每种样式映射到 InDesign 或 InCopy 的对应样式中.这样,您就可以指定使用哪些样式来设置导入文本的格式.每个导入的 Word 样式的旁边都会显示一个磁盘图标 ,直到您在 InDesign 或 InCopy 中编辑该样式为止. InCopy CC 2018 for Mac是adobe公司针对苹果os x平台而开发的一款写作编辑软件,简称为incopy cc 2018 mac

页面布局和样式美化

在上一篇中我们事先了一个简单的Hello world页面. 在这一篇中,我们来认识下布局,和样式. 目前说的比较多的就是DIV+CSS DIV 是一个html里面的标签,就好像h1一样. 看下面一段代码 <html> <head> <title>DIV+CSS</title> </head> <body> <div> DIV+CSS </div> </body> </html> 里面的所