NES.css 是一款 NES-风格(8位机) 的CSS 框架.
npm install nes.css
# or
yarn add nes.css
// style.scss
@import "./node_modules/nes.css/css/nes.css"
// script.js
import "nes.css/css/nes.min.css";
您需要安装css加载程序.
<!-- index.html -->
<html>
<head>
<link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
</head>
<body></body>
</html>
<!-- non-minified -->
<link href="https://unpkg.com/[email protected]/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 仅仅需要 CSS 而不依赖其他任何 JavaScript.
NES.css 与如下浏览器的最新版本兼容.
- Chrome
- Firefox
- Safari
未经测试
- IE/Edge
代码以及文档版权 2018 B.C.Rikko. 代码基于MIT许可发布. 文档基于Creative Commons许可发布.