NES.css红白机像素风 CSS 框架
NES.css 是一款 NES-风格(8位机) 的 CSS 框架，只需要 CSS ，不依赖其他任何 JavaScript，可以使用它实现红白机风格的按钮，字体，对话框。
安装
via package manager
npm install nes.css
# or
yarn add nes.css
AltCSS (sass, scss...)
// style.scss @import "./node_modules/nes.css/css/nes.css"
JavaScript
// script.js import "nes.css/css/nes.min.css";
需要安装 css 加载程序.
HTML
<!-- index.html --> <html> <head> <link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css"> </head> <body></body> </html>
via CDN
<!-- non-minified --> <link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" /> <!-- latest --> <link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" /> <!-- core style only --> <link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
推荐字体
| 语言 | 字体 |
|---|---|
| (默认) | Press Start 2P |
| 英语 | Kongtext |
| 日语 | 美咲フォント |
| 日语 | Nu もち |
| 韩语 | 둥근모꼴 |
| 中文 | Zpix (最像素) |
使用
NES.css 只提供组件，你需要定义自己的布局.
默认字体 Press Start 2P 只支持英文字符.，把这个框架与其他非英语的语言一起使用的时候,，请使用另外的字体.。
请根据这个关于 Google Fonts 的 说明 了解如何把它引入项目, 或者按照如下方式简单引入:
<head> <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet"> <link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" /> <style> html, body, pre, code, kbd, samp { font-family: "font-family you want to use"; } </style> </head>
浏览器支持
NES.css 与如下浏览器的最新版本兼容.
- Chrome
- Firefox
- Safari
未经测试
- IE/Edge
评论