diff --git a/_site/index.html b/_site/index.html index 0853ab4..f628769 100644 --- a/_site/index.html +++ b/_site/index.html @@ -51,20 +51,12 @@ @@ -88,30 +80,14 @@ …… </article> -<<<<<<< HEAD
  • 注意:赫蹏是正文区域的样式增强,不是normalize.cssCSS Reset的替代。因此不建议将它作用在根标签(如<body><div class="container">)上,除非像本页面一样通篇都是文章的一部分。
  • -======= -
  • - * 如需中西文混排美化,还要在页面的</body>标签前引入JavaScript脚本: -
    <script src="./heti-addon.min.js"></script>
    -<script>
    -  const heti = new Heti();
    -  heti.autoSpacing();
    -</script>
    -
  • -
  • 大功告成,查看效果吧~
  • ->>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2

    注:赫蹏是正文区域的样式增强,不是normalize.cssCSS Reset的替代。因此不建议将它作用在根标签(如<body><div class="container">)上,除非像本页面一样通篇都是文章的一部分。


    效果示例#

    -<<<<<<< HEAD

    本页面全页应用了赫蹏样式,所见即所得。下面是内置的多种排版效果演示。

    -======= -

    本页面全页应用了赫蹏样式,所见即所得。下面是内置的多种排版效果演示。

    ->>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2
    示例1:古文
    @@ -190,13 +166,8 @@

    赫蹏预置了多种多栏布局类,可以按栏数或每栏行宽进行设置。

    查看使用说明 -<<<<<<< HEAD

    为容器元素添加名为heti--columns-2的class即可实现双栏排版。

    <div class="heti heti--columns-2">...</div>
    -======= -

    为容器元素添加名为heti--columns-2的class即可实现三栏排版。

    -
    <div class="heti heti--columns-2"></div>
    ->>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2 @@ -240,13 +211,8 @@

    赫蹏预置了传统的竖排(直排)方向排版,同样贴合栅格。

    查看使用说明 -<<<<<<< HEAD

    为容器元素添加名为heti--vertical的class即可实现竖排布局。

    <div class="heti heti--vertical">...</div>
    -======= -

    为容器元素添加名为heti--vertical的class即可实现垂直布局:

    -
    <div class="heti heti--vertical"></div>
    ->>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2
    @@ -268,22 +234,12 @@

    设计原则#

    -<<<<<<< HEAD

    赫蹏项目的初衷很简单:它不作为一个CSS Reset出现,而是根据通行的中文排版规范,对网页正文区域进行排版样式增强。在部分CSS特性尚未有浏览器支持前,可通过JavaScript实现部分补充(非必要)。

    核心

    美化中文方块字排版,作用范围是网页中的文章区域(含标题、正文、元信息等),不包含网页导航、表单、侧边栏等区域(它们也不需要这套格式排版)。

    使用heti.css时建议搭配良好的中文书写习惯,即:使用正确的HTML标签(可参考后面的标签示例表)、正确的引号、中文全角标点等。使用Markdown书写文章将助你一臂之力。

    文字

    参考《中文排版需求[2]》中描述的常用书籍排版字体,赫蹏提供了黑体、宋体和传统三种字体风格,前两者分别对应无衬线、衬线字体族。文字默认采用16px作为标准字号。在标题等文字较大的情况下,会适当地增加字间距以便获得更好地可读性。

    -======= -

    核心

    -

    以美化中文方块字排版为目标,假定作用范围是网页中的文章区域(含标题、正文、元信息等),不包含网页导航、表单、侧边栏等区域(它们也不需要这套格式排版)。

    -

    使用heti.css时建议搭配良好的中文书写习惯,即:使用正确的HTML标签、正确的引号、中文全角标点等。使用Markdown书写文章将助你一臂之力。

    -

    字号

    -

    heti.css 采用16px作为默认字号。在文字较大时(作用于标题等情况),会适当地增加字间距以便获得更好地可读性。

    -

    字体

    -

    参考《中文排版需求[2]》中描述的四种常见书籍排版字体:宋体、楷体、黑体、仿宋。赫蹏提供黑体、宋体和传统三种字体风格,前两者分别对应无衬线、衬线字体族。

    ->>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2
    查看字体风格对照表
    @@ -407,17 +363,7 @@

    标点

    参考《中文排版需求》制定符号样式。唯一差异在于简体中文一律采用直角引号(「」)替代圆角引号(“”),这样可以保持字符等宽。

    间距

    -<<<<<<< HEAD

    为保持页面元素总是贴合垂直栅格,块级元素(段落、列表、表格等)采用一行行高作为底边距,半行行高作为顶边距。标题根据亲密性原则采用相反的边距设计。

    -======= -

    为保持页面元素总是贴合垂直栅格,大部分块级元素(段落、列表、表格等)采用一行行高作为底边距,半行行高作为顶边距。

    -

    其它

    -

    赫蹏基于BEM[3]命名,并提供了一些 helper classes。详细内容看下表:

    -
    - 查看辅助样式列表 -

    待补充…

    -
    ->>>>>>> 20c70557b52890ee555f81223c2dfeb4ca795af2