diff --git a/html5/render/vue/env/css.js b/html5/render/vue/env/css.js
new file mode 100644
index 0000000000..e021e0ee5b
--- /dev/null
+++ b/html5/render/vue/env/css.js
@@ -0,0 +1,50 @@
+import '../styles/reset.css'
+import '../styles/components.css'
+
+import { toCSSText } from '../utils'
+import { validateStyles } from '../validator'
+
+function getSelector (key, scopeId) {
+  if (scopeId === '@GLOBAL') {
+    return `.${key}`
+  }
+  return `.${key}[${scopeId}]`
+}
+
+/**
+ * Genearte <style>
+ * @param {String} scopeId
+ * @param {Array} cssMaps
+ */
+export function registerStaticStyles (scopeId, cssMaps) {
+  if (Array.isArray(cssMaps)) {
+    applyToDOM(cssMaps.map(css => {
+      const styles = []
+      for (const key in css) {
+        if (process.env.NODE_ENV === 'development') {
+          validateStyles(css[key])
+        }
+        styles.push(`${getSelector(key, scopeId)}{${toCSSText(css[key])}}`)
+      }
+      return styles.join('\n')
+    }))
+  }
+}
+
+function createStyleElement (cssText) {
+  const $css = document.createTextNode(cssText)
+  const $style = document.createElement('style')
+  $style.type = 'text/css'
+  $style.setAttribute('data-type', 'weex-styles')
+  $style.appendChild($css)
+  return $style
+}
+
+export function applyToDOM (styleList) {
+  if (styleList.length) {
+    const $head = document.head || document.getElementsByTagName('head')[0]
+    styleList.map(createStyleElement).forEach($style => {
+      $head.appendChild($style)
+    })
+  }
+}
diff --git a/html5/render/vue/env/index.js b/html5/render/vue/env/index.js
index d273ee1d48..d5d78442b1 100644
--- a/html5/render/vue/env/index.js
+++ b/html5/render/vue/env/index.js
@@ -1,6 +1,3 @@
-import '../styles/reset.css'
-import '../styles/components.css'
-
 // import 'lazyimg'
 import '../../browser/render/gesture'
 
@@ -15,6 +12,7 @@ import 'core-js/modules/es6.promise'
 
 import modules from '../modules'
 import weex from './weex'
+import { registerStaticStyles } from './css'
 
 // register built-in modules.
 weex.install(modules)
@@ -28,6 +26,7 @@ export function setVue (vue) {
 }
 
 window.weex = weex
+window.__register_static_styles__ = registerStaticStyles
 window.global = window
 
 export default weex
diff --git a/html5/render/vue/utils/index.js b/html5/render/vue/utils/index.js
index d3c2d5b0c1..c3b94326c4 100644
--- a/html5/render/vue/utils/index.js
+++ b/html5/render/vue/utils/index.js
@@ -5,6 +5,8 @@ export * from './lazyload'
 export * from './style'
 export * from './type'
 
+import { normalize } from './flex'
+
 /**
  * Create a cached version of a pure function.
  */
@@ -71,11 +73,39 @@ export function nextFrame (callback) {
   runner(callback)
 }
 
-export function toCSSText (object) {
+/**
+ * add flex prefixes for compatibility conisderation.
+ */
+export function normalizeStyles (style) {
+  const styles = normalize(style)
+
+  const realStyle = {}
+  for (const key in styles) {
+    const name = hyphenate(key)
+    let value = styles[key]
+
+    // TODO: add more reliable check
+    if (typeof value === 'number' && value !== 'line-height') {
+      // TODO: support more units
+      value += 'px'
+    }
+
+    realStyle[name] = value
+  }
+  return realStyle
+}
+
+// TODO: prefix or hack
+export function generateCSSText (key, value) {
+  return `${hyphenate(key)}:${value};`
+}
+
+export function toCSSText (object, rewriter = generateCSSText) {
   let cssText = ''
   if (object) {
-    for (const key in object) {
-      cssText += `${hyphenate(key)}:${object[key]};`
+    const styles = normalizeStyles(object)
+    for (const key in styles) {
+      cssText += rewriter(key, styles[key])
     }
   }
   return cssText
diff --git a/html5/render/vue/utils/style.js b/html5/render/vue/utils/style.js
index 5892361f34..cc7f8e4b33 100644
--- a/html5/render/vue/utils/style.js
+++ b/html5/render/vue/utils/style.js
@@ -1,5 +1,3 @@
-import { normalize } from './flex'
-
 /**
  * remove comments from a cssText.
  */
@@ -7,13 +5,6 @@ export function trimComment (cssText) {
   return cssText.replace(/(?:\/\*)[^*]*\*\//g, '')
 }
 
-/**
- * add flex prefixes for compatibility conisderation.
- */
-export function normalizeStyles (style) {
-  return normalize(style)
-}
-
 let support = null
 
 export function supportSticky () {
diff --git a/html5/render/vue/validator/style.js b/html5/render/vue/validator/style.js
index 90997af5f4..7048932d11 100644
--- a/html5/render/vue/validator/style.js
+++ b/html5/render/vue/validator/style.js
@@ -47,7 +47,10 @@ export function fontStyle (value) {
 }
 
 export function fontWeight (value) {
-  return ['normal', 'bold', 'light', 'bolder', 'lighter'].indexOf(value) !== -1
+  return [
+    '100', '200', '300', '400', '500', '600', '700', '800', '900',
+    'normal', 'bold', 'light', 'bolder', 'lighter'
+  ].indexOf(String(value)) !== -1
 }
 
 export function textDecoration (value) {