CSSans.Pro

CSSANS PRO-五颜六色，野蛮的CSS字体

CSSANS PRO是Andronache Izabela和Codrin Pavel的恰好竞争CSS项目。

目录

• 概述 - 所有角色和CSS课程
• 快速启动 - 在几秒钟内启动并运行CSSANS Pro
• 快速启动 - JavaScript版本 - 让JS进行写作
• 选项
  • 颜色
  • 信件间隔
  • 单词间隔
  • 线高
  • 斜体（倾斜文本）
  • 对准：中心
  • 对准：对
• 浏览器支持 - 如何在没有CSS变量的情况下使用
• 可访问性 - 超级重要
• 安装 - 本地运行此存储库的说明

概述

大写

• a -z <b class="cssans:LETTER"></b>

小写

• a -z <b class="cssans:letter"></b>

数字

• 0-9 <b class="cssans:NUMBER"></b>

符号

• <b class="cssans:CHARACTER"></b> 〜，

逃脱的符号

• ` <b class="cssans:%60"></b>
• ^ <b class="cssans:%5E"></b>
• ％ <b class="cssans:%25"></b>
• [ <b class="cssans:%5B"></b>
• ] <b class="cssans:%5D"></b>
• { <b class="cssans:%7B"></b>
• } <b class="cssans:%7D"></b>
• “ <b class="cssans:%22"></b>
• << <b class="cssans:%3C"></b>
• > <b class="cssans:%3E"></b>
• <b class="cssans:%5C"></b>
• | <b class="cssans:%7C"></b>

快速开始

从存储库中获取缩小的CSS文件：

• /dist/cssans.min.css

添加一些示例HTML标记：

 < div class =" cssans cssans--center " >
    < div class =" cssans__accessible " > CSSans Pro </ div >

    < div class =" cssans__word " >
        < b class =" cssans:C " > </ b >
        < b class =" cssans:S " > </ b >
        < b class =" cssans:S " > </ b >
        < b class =" cssans:a " > </ b >
        < b class =" cssans:n " > </ b >
        < b class =" cssans:s " > </ b >
    </ div >

    < div class =" cssans__word " >
        < b class =" cssans:P " > </ b >
        < b class =" cssans:r " > </ b >
        < b class =" cssans:o " > </ b >
    </ div >
</ div >

... 利润！

这是一个快速分解：

• 每个字符都是一个带有一类cssans:CHAR
• 每个单词都在.cssans__word容器中。这将确保所有文本的间隔都正确。
• 为了提高可访问性，您应该在.cssans__accessible容器中添加原始文本。绝对阅读
• CSSANS PRO提供了一些选项和内置的助手类，例如.cssans--center 。查看更多选项

快速启动 - JavaScript版本

从存储库中获取缩小的CSS和JS文件：

• /dist/cssans.min.css
• /dist/cssans.min.js

添加一些示例HTML标记：

 < div id =" foo " > CSSans Pro </ div >

致电CSSans(element, text)

 var element = document . getElementById ( 'foo' ) ;
var text = element . innerText ;
CSSans ( element , text ) ;

您可以从/_src/cssans/js/cssans.js获取未启动的CSSANS（）函数，以查看其中发生了什么。实际上，没有什么可以随意制作自己的。

选项

颜色

颜色pallete由5个CSS变量控制为--cssans-**WHICHCOLOR**: **R**, **G**, **B** 。

该符号仅使用没有rgb()语法的颜色值。

 --cssans-primary : 31 , 51 , 104 ;    // blue
--cssans-secondary : 237 , 21 , 118 ; // pink
--cssans-accent1 : 43 , 208 , 247 ;   // light blue
--cssans-accent2 : 255 , 92 , 92 ;    // orange
--cssans-accent3 : 255 , 216 , 9 ;    // yellow

信件间隔

 --cssans-letter-spacing : 0.1 em ;

单词间隔

 --cssans-word-spacing : 1 em ;

线高

 --cssans-line-height : 1.1 em ;

对齐：中心

使用cssans--center类。

此类将确保所有单词在父容器中间正确对齐。

只需设置text-align:center;由于单词被边距分开，因此不会做得很好。

 < div class =" cssans--center " >
    < div class =" cssans__word " > ... </ div >
</ div >

对齐：对

在容器上使用字体标记的容器上使用cssans--right类。

该课程将帮助您正确地将文本与父容器的右侧对齐。

 < div class =" cssans--right " >
    < div class =" cssans__word " > ... </ div >
</ div >

斜体（倾斜）

在容器上使用cssans--slanted CSSANS，可容纳您的字体标记，以使字体具有斜体化的外观。

注意：此类实际上添加了transform: skew(-15deg);每个.cssans__word 。可以随意实验吗？

 < div class =" cssans--slanted " >
    < div class =" cssans__word " > ... </ div >
</ div > 

浏览器支持

CSSANS PRO可以处理不支持CSS自定义属性的较旧浏览器。这是做这件事的几种方法，请选择最适合的方法：

• 使用cssans pro /dist/cssans.min.ie.css的预构建的IE兼容版本 - 此文件中没有CSS变量，所有代码都将预编译为普通的CSS属性。可以随意找到/更换您要自定义的所有颜色和间距。

• 在本地安装仓库，并构建您自己的cssans.min.ie.css或...

• 使用polyfil，例如CSS-VARS-PONYFILL

可访问性

如果使用CSSans() JavaScript函数，则无需阅读此内容。

CSSANS Pro是由CSS形状制成的，屏幕读取器和其他辅助技术无法识别。

为了使您的网站可访问，请使用内置的.cssans__accessible accessss class。真的很容易，看：

 < div class =" cssans__accessible " > I can be read by a screen reader, hurray! </ div > 

安装

1. 您将需要工作的Jekyll环境，并在计算机上安装了NPM 。安装了NPM后，如果尚未使用npm install -g gulp则需要将gulp安装到全局根目录中。在继续之前，请确保它们在系统上工作。

2. 克隆仓库

3. 使用npm install安装依赖项

4. 运行gulp

在这一点上，浏览器应在http://localhost:3000打开一个新的浏览器选项卡，您很高兴！

存储库包含CSSANS PRO的所有文件以及演示站点。

您可以在_src/cssans/sass/下找到字体文件。所有CSS自定义属性均在_common.scss中设置。

dist目录应在更新文件时立即更新，因此您可以在完成编辑后立即从_dist文件夹中获取缩小文件。

玩得开心！