diff --git a/doric-android/doric/src/main/java/pub/doric/shader/TextNode.java b/doric-android/doric/src/main/java/pub/doric/shader/TextNode.java
index a8de13c2..3e39f250 100644
--- a/doric-android/doric/src/main/java/pub/doric/shader/TextNode.java
+++ b/doric-android/doric/src/main/java/pub/doric/shader/TextNode.java
@@ -15,6 +15,7 @@
  */
 package pub.doric.shader;
 
+import android.graphics.Typeface;
 import android.util.TypedValue;
 import android.view.Gravity;
 import android.widget.TextView;
@@ -61,6 +62,21 @@ public class TextNode extends ViewNode<TextView> {
             case "maxLines":
                 view.setMaxLines(prop.asNumber().toInt());
                 break;
+            case "fontStyle":
+                if (prop.isString()) {
+                    if ("bold".equals(prop.asString().value())) {
+                        view.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
+                    } else if ("italic".equals(prop.asString().value())) {
+                        view.setTypeface(Typeface.defaultFromStyle(Typeface.ITALIC));
+                    } else if ("bold_italic".equals(prop.asString().value())) {
+                        view.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD_ITALIC));
+                    } else {
+                        view.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
+                    }
+                } else {
+                    view.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
+                }
+                break;
             default:
                 super.blend(view, name, prop);
                 break;
diff --git a/doric-demo/src/TextDemo.ts b/doric-demo/src/TextDemo.ts
new file mode 100644
index 00000000..75e1983f
--- /dev/null
+++ b/doric-demo/src/TextDemo.ts
@@ -0,0 +1,60 @@
+import { Panel, Group, scroller, vlayout, layoutConfig, LayoutSpec, Input, Gravity, log, input, text } from "doric";
+import { title } from "./utils";
+@Entry
+class TextDemo extends Panel {
+    build(root: Group) {
+        scroller(
+            vlayout(
+                [
+                    title("Text Demo"),
+                    text({
+                        text: "This is normal text",
+                    }),
+                    text({
+                        text: "This is normal text",
+                        textSize: 20,
+                    }),
+                    text({
+                        text: "This is normal text",
+                        textSize: 30,
+                    }),
+                    text({
+                        text: "This is bold text",
+                        fontStyle: "bold",
+                    }),
+                    text({
+                        text: "This is bold text",
+                        textSize: 30,
+                        fontStyle: "bold"
+                    }),
+                    text({
+                        text: "This is italic text",
+                        fontStyle: "italic"
+                    }),
+                    text({
+                        text: "This is italic text",
+                        textSize: 30,
+                        fontStyle: "italic"
+                    }),
+                    text({
+                        text: "This is bold_italic text",
+                        fontStyle: "bold_italic"
+                    }),
+                    text({
+                        text: "This is bold_italic text",
+                        textSize: 30,
+                        fontStyle: "bold_italic"
+                    }),
+                ],
+                {
+                    space: 10,
+                    layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT)
+                }
+            ),
+            {
+                layoutConfig: layoutConfig().most()
+            }
+        ).in(root)
+    }
+
+}
\ No newline at end of file
diff --git a/doric-iOS/Pod/Classes/Shader/DoricTextNode.m b/doric-iOS/Pod/Classes/Shader/DoricTextNode.m
index 8c261a88..3181389a 100644
--- a/doric-iOS/Pod/Classes/Shader/DoricTextNode.m
+++ b/doric-iOS/Pod/Classes/Shader/DoricTextNode.m
@@ -36,7 +36,12 @@ - (void)blendView:(UILabel *)view forPropName:(NSString *)name propValue:(id)pro
     if ([name isEqualToString:@"text"]) {
         view.text = prop;
     } else if ([name isEqualToString:@"textSize"]) {
-        view.font = [UIFont systemFontOfSize:[(NSNumber *) prop floatValue]];
+        UIFont *font = view.font;
+        if (font) {
+            view.font = [view.font fontWithSize:[(NSNumber *) prop floatValue]];
+        } else {
+            view.font = [UIFont systemFontOfSize:[(NSNumber *) prop floatValue]];
+        }
     } else if ([name isEqualToString:@"textColor"]) {
         view.textColor = DoricColor(prop);
     } else if ([name isEqualToString:@"textAlignment"]) {
@@ -50,6 +55,23 @@ - (void)blendView:(UILabel *)view forPropName:(NSString *)name propValue:(id)pro
         view.textAlignment = alignment;
     } else if ([name isEqualToString:@"maxLines"]) {
         view.numberOfLines = [prop integerValue];
+    } else if ([name isEqualToString:@"fontStyle"]) {
+        UIFont *font = view.font;
+        if (!font) {
+            font = [UIFont systemFontOfSize:[UIFont systemFontSize]];
+        }
+        UIFontDescriptor *fontDescriptor = nil;
+        if ([@"bold" isEqualToString:prop]) {
+            fontDescriptor = [font.fontDescriptor fontDescriptorWithSymbolicTraits:UIFontDescriptorTraitBold];
+        } else if ([@"italic" isEqualToString:prop]) {
+            fontDescriptor = [font.fontDescriptor fontDescriptorWithSymbolicTraits:UIFontDescriptorTraitItalic];
+        } else if ([@"bold_italic" isEqualToString:prop]) {
+            fontDescriptor = [font.fontDescriptor fontDescriptorWithSymbolicTraits:UIFontDescriptorTraitBold | UIFontDescriptorTraitItalic];
+        }
+        if (fontDescriptor) {
+            font = [UIFont fontWithDescriptor:fontDescriptor size:0];
+        }
+        view.font = font;
     } else {
         [super blendView:view forPropName:name propValue:prop];
     }
diff --git a/doric-js/bundle/doric-lib.js b/doric-js/bundle/doric-lib.js
index 176d2f79..0e1fec33 100644
--- a/doric-js/bundle/doric-lib.js
+++ b/doric-js/bundle/doric-lib.js
@@ -506,6 +506,8 @@ class Gravity {
 }
 Gravity.origin = new Gravity;
 Gravity.Center = Gravity.origin.center();
+Gravity.CenterX = Gravity.origin.centerX();
+Gravity.CenterY = Gravity.origin.centerY();
 Gravity.Left = Gravity.origin.left();
 Gravity.Right = Gravity.origin.right();
 Gravity.Top = Gravity.origin.top();
@@ -1180,6 +1182,10 @@ __decorate$3([
     Property,
     __metadata$3("design:type", Gravity)
 ], Text.prototype, "textAlignment", void 0);
+__decorate$3([
+    Property,
+    __metadata$3("design:type", String)
+], Text.prototype, "fontStyle", void 0);
 function text(config) {
     const ret = new Text;
     ret.layoutConfig = layoutConfig().fit();
diff --git a/doric-js/bundle/doric-vm.js b/doric-js/bundle/doric-vm.js
index 62dc21fe..6399b732 100644
--- a/doric-js/bundle/doric-vm.js
+++ b/doric-js/bundle/doric-vm.js
@@ -1965,6 +1965,8 @@ class Gravity {
 }
 Gravity.origin = new Gravity;
 Gravity.Center = Gravity.origin.center();
+Gravity.CenterX = Gravity.origin.centerX();
+Gravity.CenterY = Gravity.origin.centerY();
 Gravity.Left = Gravity.origin.left();
 Gravity.Right = Gravity.origin.right();
 Gravity.Top = Gravity.origin.top();
@@ -2639,6 +2641,10 @@ __decorate$3([
     Property,
     __metadata$3("design:type", Gravity)
 ], Text.prototype, "textAlignment", void 0);
+__decorate$3([
+    Property,
+    __metadata$3("design:type", String)
+], Text.prototype, "fontStyle", void 0);
 function text(config) {
     const ret = new Text;
     ret.layoutConfig = layoutConfig().fit();
diff --git a/doric-js/index.d.ts b/doric-js/index.d.ts
index 550e8725..375c2717 100644
--- a/doric-js/index.d.ts
+++ b/doric-js/index.d.ts
@@ -432,6 +432,7 @@ declare module 'doric/lib/src/widget/text' {
         textSize?: number;
         maxLines?: number;
         textAlignment?: Gravity;
+        fontStyle?: "normal" | "bold" | "italic" | "bold_italic";
     }
     export class Text extends View implements IText {
         text?: string;
@@ -439,6 +440,7 @@ declare module 'doric/lib/src/widget/text' {
         textSize?: number;
         maxLines?: number;
         textAlignment?: Gravity;
+        fontStyle?: "normal" | "bold" | "italic" | "bold_italic";
     }
     export function text(config: IText): Text;
 }
@@ -901,6 +903,8 @@ declare module 'doric/lib/src/util/gravity' {
         centerY(): Gravity;
         toModel(): number;
         static Center: Gravity;
+        static CenterX: Gravity;
+        static CenterY: Gravity;
         static Left: Gravity;
         static Right: Gravity;
         static Top: Gravity;
diff --git a/doric-js/lib/src/util/gravity.d.ts b/doric-js/lib/src/util/gravity.d.ts
index 5fe52e96..7b0b932c 100644
--- a/doric-js/lib/src/util/gravity.d.ts
+++ b/doric-js/lib/src/util/gravity.d.ts
@@ -18,6 +18,8 @@ export declare class Gravity implements Modeling {
     toModel(): number;
     private static origin;
     static Center: Gravity;
+    static CenterX: Gravity;
+    static CenterY: Gravity;
     static Left: Gravity;
     static Right: Gravity;
     static Top: Gravity;
diff --git a/doric-js/lib/src/util/gravity.js b/doric-js/lib/src/util/gravity.js
index 31058f10..8c4c9486 100644
--- a/doric-js/lib/src/util/gravity.js
+++ b/doric-js/lib/src/util/gravity.js
@@ -62,6 +62,8 @@ export class Gravity {
 }
 Gravity.origin = new Gravity;
 Gravity.Center = Gravity.origin.center();
+Gravity.CenterX = Gravity.origin.centerX();
+Gravity.CenterY = Gravity.origin.centerY();
 Gravity.Left = Gravity.origin.left();
 Gravity.Right = Gravity.origin.right();
 Gravity.Top = Gravity.origin.top();
diff --git a/doric-js/lib/src/widget/text.d.ts b/doric-js/lib/src/widget/text.d.ts
index 84732f91..beb0f668 100644
--- a/doric-js/lib/src/widget/text.d.ts
+++ b/doric-js/lib/src/widget/text.d.ts
@@ -7,6 +7,7 @@ export interface IText extends IView {
     textSize?: number;
     maxLines?: number;
     textAlignment?: Gravity;
+    fontStyle?: "normal" | "bold" | "italic" | "bold_italic";
 }
 export declare class Text extends View implements IText {
     text?: string;
@@ -14,5 +15,6 @@ export declare class Text extends View implements IText {
     textSize?: number;
     maxLines?: number;
     textAlignment?: Gravity;
+    fontStyle?: "normal" | "bold" | "italic" | "bold_italic";
 }
 export declare function text(config: IText): Text;
diff --git a/doric-js/lib/src/widget/text.js b/doric-js/lib/src/widget/text.js
index fe2f0a15..228f911c 100644
--- a/doric-js/lib/src/widget/text.js
+++ b/doric-js/lib/src/widget/text.js
@@ -48,6 +48,10 @@ __decorate([
     Property,
     __metadata("design:type", Gravity)
 ], Text.prototype, "textAlignment", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], Text.prototype, "fontStyle", void 0);
 export function text(config) {
     const ret = new Text;
     ret.layoutConfig = layoutConfig().fit();
diff --git a/doric-js/src/util/gravity.ts b/doric-js/src/util/gravity.ts
index 77505f95..267cef41 100644
--- a/doric-js/src/util/gravity.ts
+++ b/doric-js/src/util/gravity.ts
@@ -99,6 +99,7 @@ export class Gravity implements Modeling {
     static Top = Gravity.origin.top()
     static Bottom = Gravity.origin.bottom()
 }
+
 export function gravity() {
     return new Gravity
 }
\ No newline at end of file
diff --git a/doric-js/src/widget/text.ts b/doric-js/src/widget/text.ts
index 527a4463..68f0824f 100644
--- a/doric-js/src/widget/text.ts
+++ b/doric-js/src/widget/text.ts
@@ -24,6 +24,7 @@ export interface IText extends IView {
     textSize?: number
     maxLines?: number
     textAlignment?: Gravity
+    fontStyle?: "normal" | "bold" | "italic" | "bold_italic"
 }
 
 export class Text extends View implements IText {
@@ -41,6 +42,9 @@ export class Text extends View implements IText {
 
     @Property
     textAlignment?: Gravity
+
+    @Property
+    fontStyle?: "normal" | "bold" | "italic" | "bold_italic"
 }
 
 export function text(config: IText) {
diff --git a/doric-web/src/shader/DoricTextNode.ts b/doric-web/src/shader/DoricTextNode.ts
index e362ba0e..de24393f 100644
--- a/doric-web/src/shader/DoricTextNode.ts
+++ b/doric-web/src/shader/DoricTextNode.ts
@@ -40,6 +40,9 @@ export class DoricTextNode extends DoricViewNode {
                     v.style.alignItems = "center"
                 }
                 break
+            case "fontStyle":
+                v.style.fontWeight = ""
+                break
             default:
                 super.blendProps(v, propName, prop)
                 break