美文网首页Java 程序员程序员Java
美观实用!这个中文排版开源项目你值得拥有

美观实用!这个中文排版开源项目你值得拥有

作者: 马小莫QAQ | 来源:发表于2020-12-03 15:57 被阅读0次

    今天给大家推荐一个小众的 GitHub 项目:赫蹏,一个非常美观又实用的开源项目,超好看的中文排版样式。

    赫蹏(hètí)是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来,可以为网站的读者带来更好的文章阅读体验。

    1. 主要特性

    主要特性:

    • 贴合网格的排版;
    • 全标签样式美化;
    • 预置古文、诗词样式;
    • 预置多种排版样式(行间注、多栏、竖排等);
    • 多种预设字体族(仅限桌面端);
    • 简 / 繁体中文支持;
    • 自适应黑暗模式;
    • 中西文混排美化,不再手敲空格(基于 JavaScript 脚本);
    • 全角标点挤压(基于 JavaScript 脚本);
    • 兼容normalize.cssCSS Reset等常见样式重置;
    • 移动端支持;
    • ……

    除此之外,它还支持如下的特性:

    • 自适应黑暗模式
    • 标点挤压
    • 中、西文混排
    • 繁体中文支持
    • 诗词版式
    • 行间注版式

    2. 效果图

    总之,用上就会变好看。来欣赏一下效果图:

    下面是预览的效果。

    预览链接:https://sivan.github.io/heti/

    更改字体

    加网格

    黑夜模式

    3. 使用方法

    使用方法如下:

    在页面的 <head> 标签中引入 heti.css 文件:

    <link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">

    在要作用的容器元素上增加 class="heti" 的类名即可:

    <article class="entry heti">
    <h1>我的世界观</h1>
    <p>有钱人的生活就是这么朴实无华,且枯燥</p>
    ……
    </article>

    使用增强脚本(可选):

    <script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
    <script>
    const heti = new Heti('.heti');
    heti.autoSpacing(); // 自动进行中西文混排美化和标点挤压
    </script>

    是不是感觉很棒呢?

    4. 下载地址

    转发+评论,关注我私信回复“666”即可免费获取开源项目下载地址

    相关文章

      网友评论

        本文标题:美观实用!这个中文排版开源项目你值得拥有

        本文链接:https://www.haomeiwen.com/subject/wbwmwktx.html