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
(部分内容摘抄自他人撰写内容,如有意见请联系作者更改)
HTML页面仿WORD样式的更多相关文章
- WPF仿Word头部格式,涉及DEV RibbonControl,NarvbarControl,ContentPresenter,Navigation
时隔1个月,2015/06/17走进新的环境. 最近一个星期在学习仿Word菜单栏的WPF实现方式,废话不多说,先看一下效果. 打开界面后,默认选中[市场A],A对应的菜单栏,如上图, 选择[市场B] ...
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
- 【MVC】 非常简单的页面导出 WORD, EXCEL方法
[MVC] 页面导出 WORD, EXCEL 前端 js function output() { var para = new Object(); para.html = getHtml(" ...
- 动态为页面添加CSS样式文件引用
动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...
- 一款基于的jQuery仿苹果样式焦点图插件
这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...
- 今天被 <!doctype html> 搞了两个小时,两个页面同样的样式,chosen右边的小箭头,一个上下居中对齐 一个居顶对齐。最后找到问题所在doctype
今天被 <!doctype html> 搞了两个小时,两个页面同样的样式,chosen右边的小箭头,一个上下居中对齐 一个居顶对齐.最后找到问题所在doctype <-- 这个小箭头
- vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改
vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...
- 【CSS】如何在一个页面中引入样式css
CSS(Cascading Style Sheet)又叫层叠样式表.是我们学习前端必不可少的一门语言,学习它其实就是为了学会如何去更改页面标签的样式.目前使用最广的是css3,但同样的,他是从css2 ...
- HTML页面仿iphone数字角标
做仿iphone样式的数字角标,用简单的css来实现 <html><head><title>角标数字</title><style type=&qu ...
随机推荐
- ehcache的使用 Shiro与Ehcache的结合(附:EhcacheUtils)
ehcache 缓存的使用 合理的使用缓存会极大的提高程序的运行效率.切记:缓存请勿滥用. 配置ehcache与Shiro shiro初识请查看该文章 https://blog.csdn.net/py ...
- Android使用webService(发送xml数据的方式,不使用jar包)
Android使用webService可以用ksoap2.jar包来使用.但是我觉得代码不好理解,而且记不住. 所以我查询了好多资料,以及自己的理解.可以用代码发送http请求(发送xml数据)来访问 ...
- JS系列1---节流,去抖(防抖)应用场景:intput请求优化,页面监听
在项目开发过程中经常遇到在input的change事件中发起请求,将用户最新输入的字符作为data传给后台,但是如果用户的输入频率过高,或者用户输入的字符还未拼成一个完整的字词,这时候发起请求会浪费网 ...
- windows和linux下如何对拍
对拍是各种计算机考试检查时必备工具,实际上十分强大,只要你的暴力没有写错就没有问题. 对拍的意思:(怎么有点语文课的意思雾) 对:看见'对'就可以知道有两个. 拍:就是把两个程序结果拍在一起,对照(有 ...
- 【原创】这一次,Chrome表现和IE11一样令人失望,围观群众有:Edge,Firefox
前言 俗话说,常在河边走哪能不湿鞋,天天和浏览器打交道,发现浏览器竟然也隐藏BUG也不是新鲜事了.可以看下我之前的文章: [原创]分享IE7一个神奇的BUG(不是封闭标签的问题,的确是IE7的BUG) ...
- java - 如何使一个类不能被继承
使用final关键字: 使用私有构造器: public final class InitTest{ private InitTest(){} }
- [转]jQuery不同版本区别
原文转载自csdn:http://blog.csdn.net/u010167032/article/details/23666145 了解不同版本之间的差异,与助于选择适合自己项目的版本. ⒈4重要新 ...
- 【iOS】"OS X"想要进行更改。键入管理员的名称和密码以允许执行此操作("OS X"想使用系统钥匙串)
今天真机调试的时候遇到了这个问题,如下图: 每次调试都要输入两次用户名和密码,好麻烦的说…… 关键时刻找到了这篇文章:"Mac OS X"想要进行更改.键入管理员的名称和密码以允许 ...
- 【Python-Django】Jinja2模板引擎配置教程详解!!!!
Jinjia2的官方文档:http://jinja.pocoo.org/docs/2.10/ 1. 安装Jinja2扩展包 $ pip install Jinja2 2. 配置Jinja2模板引擎 T ...
- 【JDK】JDK源码分析-AbstractQueuedSynchronizer(2)
概述 前文「JDK源码分析-AbstractQueuedSynchronizer(1)」初步分析了 AQS,其中提到了 Node 节点的「独占模式」和「共享模式」,其实 AQS 也主要是围绕对这两种模 ...