level font normalize

index.html

 <div class="card">
     <img class="card_type" src="mse/data/yugioh-standard.mse-style/card-slifer.png"/>
     <span class="name">喵了个咪</span>
-    <img class="attribute" src="mse/data/yugioh-caicai-levels.mse-symbol-font/水.png"></div>
-<div class="level">
-    <img src="mse/data/yugioh-caicai-levels.mse-symbol-font/star.png">
-</div>
-<img class="image" src="shanghai.jpg"/>
-<span class="monster_type">【人偶族·卖萌】</span>
-<span class="number">TH14-ZH998</span>
-<span class="edition">DUEL TERMINAL</span>
-<div class="rule_text">啦啦啦德玛西亚</div>
-<span class="gamecode">99999998</span>
-<img class="rarity2" src="mse/data/yugioh-caicai-levels.mse-symbol-font/暗防伪.png"/>
-<span class="copyright">©1996 KAZUKI TAKAHASHI</span>
-<span class="atkoverlay">123</span>
-<span class="defoverlay">321</span>
+    <img class="attribute" src="mse/data/yugioh-caicai-levels.mse-symbol-font/水.png"/>
+
+    <div class="level"></div>
+    <img class="image" src="shanghai.jpg"/>
+    <span class="monster_type">【人偶族·卖萌】</span>
+    <span class="number">TH14-ZH998</span>
+    <span class="edition">DUEL TERMINAL</span>
+
+    <div class="rule_text">啦啦啦德玛西亚</div>
+    <span class="gamecode">99999998</span>
+    <img class="rarity2" src="mse/data/yugioh-caicai-levels.mse-symbol-font/暗防伪.png"/>
+    <span class="copyright">©1996 KAZUKI TAKAHASHI</span>
+    <span class="atk_title">ATK / </span>
+    <span class="def_title">DEF / </span>
+    <span class="atk">123</span>
+    <span class="def">321</span>
 </div>
 
-<link rel="stylesheet" href="style.css" />
\ No newline at end of file
+<link rel="stylesheet" href="normalize.css"/>
+<link rel="stylesheet" href="style.css"/>
\ No newline at end of file

normalize.css

+/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-family: sans-serif; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre-wrap;
+}
+
+/**
+ * Set consistent quote types.
+ */
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+
+img {
+    border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

style.css

 @charset "utf-8";
-body {
-    margin: 0;
+@font-face
+{
+    font-family: "YGO菜菜";
+    src: url('mse/fonts/YGO菜菜.TTF');
+}
+
+@font-face
+{
+    font-family: "Palatino Linotype";
+    src: url('mse/fonts/PalatinoLinoType.ttf');
+}
+@font-face
+{
+    font-family: "BankGothic Md BT";
+    src: url('mse/fonts/BankGothicMediumBT.ttf');
+}
+
+@font-face
+{
+    font-family: "DFHSGothic";
+    src: url('mse/fonts/注音字体.ttf');
+}
+@font-face
+{
+    font-family: "MatrixBoldSmallCaps";
+    src: url('mse/fonts/MatrixBoldSmallCaps.ttf');
 }
 
+
 .card {
     position: relative;
+    width: 421px;
+    height: 614px;
 }
 
 .card_type {
     position: absolute;
-    width: 421px;
-    height: 614px;
+    width: 100%;
+    height: 100%;
 }
 
 .name {
@@ -34,17 +61,15 @@ body {
 
 .level {
     position: absolute;
-    left: 24.5px;
-    top: 87.5px;
-    height: 33px;
-    width: 341.5px;
-    text-align: right;
-    padding-top: 6px;
-}
-
-.level img {
-    width: 20px;
+    /*left: 30.5px;*/
+    right: 20px;
+    top: 90px;
     height: 20px;
+    width: -webkit-calc(20px*4);
+    text-align: right;
+    font-size:0;
+    background: url(mse/data/yugioh-caicai-levels.mse-symbol-font/star.png) repeat-x;
+    background-size: 20px 20px;
 }
 
 .image {
@@ -122,8 +147,12 @@ body {
     font-family: "DFHSGothic";
     font-size: 8px;
 }
-
-.atkoverlay {
+.atk_title {
+    position: absolute;
+    left: 180px;
+    top: 558px;
+}
+.atk {
     position: absolute;
     left: 187px;
     top: 558px;
@@ -134,7 +163,13 @@ body {
     font-size: 13.5px;
 }
 
-.defoverlay {
+.def_title {
+    position: absolute;
+    left: 280px;
+    top: 558px;
+}
+
+.def {
     position: absolute;
     left: 272px;
     top: 558px;