diff --git a/packages/f2/src/components/geometry/index.tsx b/packages/f2/src/components/geometry/index.tsx
index b176a9295..8947f2246 100644
--- a/packages/f2/src/components/geometry/index.tsx
+++ b/packages/f2/src/components/geometry/index.tsx
@@ -122,6 +122,10 @@ class Geometry<
     this.attrController = new AttrController(chart.scale, attrsRange);
     const { attrController, justifyContent } = this;
 
+    if (props?.size) {
+      props.size = context.px2hd(props.size);
+    }
+
     const attrOptions = attrController.getAttrOptions(props, !coord.isCyclic() || justifyContent);
     attrController.create(attrOptions);
   }
@@ -466,13 +470,14 @@ class Geometry<
    *  如果是Category/Identity 则第一个元素走 mapping
    */
   _mapping(records) {
-    const { attrs, props, attrController } = this;
+    const { attrs, props, attrController, context } = this;
     const { coord } = props;
 
     const { linearAttrs, nonlinearAttrs } = attrController.getAttrsByLinear();
     const defaultAttrValues = attrController.getDefaultAttrValues();
 
     const mappedRecords = [];
+
     for (let i = 0, len = records.length; i < len; i++) {
       const record = records[i];
       const { children } = record;
@@ -488,8 +493,9 @@ class Geometry<
       for (let k = 0, len = nonlinearAttrs.length; k < len; k++) {
         const attrName = nonlinearAttrs[k];
         const attr = attrs[attrName];
+        const value = attr.mapping(firstChild[attr.field], firstChild.origin);
         // 非线性映射只用映射第一项就可以了
-        attrValues[attrName] = attr.mapping(firstChild[attr.field], firstChild.origin);
+        attrValues[attrName] = context.px2hd(value);
       }
 
       // 线性属性映射
diff --git a/packages/f2/src/components/interval/withInterval.tsx b/packages/f2/src/components/interval/withInterval.tsx
index 76a8822e9..b005a5502 100644
--- a/packages/f2/src/components/interval/withInterval.tsx
+++ b/packages/f2/src/components/interval/withInterval.tsx
@@ -75,7 +75,6 @@ export default (Views) => {
 
     mapping() {
       const records = super.mapping();
-
       const { props } = this;
       const { coord, sizeZoom } = props;
       const y0 = this.getY0Value();
diff --git "a/packages/f2/test/components/geometry/__image_snapshots__/attr-test-tsx-geometry-attr-size-field-range-\346\224\257\346\214\201px-1-snap.png" "b/packages/f2/test/components/geometry/__image_snapshots__/attr-test-tsx-geometry-attr-size-field-range-\346\224\257\346\214\201px-1-snap.png"
new file mode 100644
index 000000000..c4d187128
Binary files /dev/null and "b/packages/f2/test/components/geometry/__image_snapshots__/attr-test-tsx-geometry-attr-size-field-range-\346\224\257\346\214\201px-1-snap.png" differ
diff --git "a/packages/f2/test/components/geometry/__image_snapshots__/attr-test-tsx-geometry-attr-size-\346\224\257\346\214\201-px-1-snap.png" "b/packages/f2/test/components/geometry/__image_snapshots__/attr-test-tsx-geometry-attr-size-\346\224\257\346\214\201-px-1-snap.png"
new file mode 100644
index 000000000..86bcf4be4
Binary files /dev/null and "b/packages/f2/test/components/geometry/__image_snapshots__/attr-test-tsx-geometry-attr-size-\346\224\257\346\214\201-px-1-snap.png" differ
diff --git a/packages/f2/test/components/geometry/attr.test.tsx b/packages/f2/test/components/geometry/attr.test.tsx
index eb6f9800c..211afb085 100644
--- a/packages/f2/test/components/geometry/attr.test.tsx
+++ b/packages/f2/test/components/geometry/attr.test.tsx
@@ -456,6 +456,27 @@ describe('Geometry - Attr', () => {
     expect(geometryRef.current.records[1].children[0].size).toBe(16);
   });
 
+  it('size 支持 px', async () => {
+    const ref = {};
+    const context = createContext('size 支持px');
+    const { type, props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
+          <Axis field="year" />
+          <Axis field="sales" />
+          <Interval x="year" y="sales" size={'10px'}></Interval>
+          <Line x="year" y="sales" size={'5px'} />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
+
   it('size = {field}  用size大小来做分类', async () => {
     const context = createContext('size = {field}  用size大小来做分类', { width: '380px' });
     const geometryRef = { current: null };
@@ -477,6 +498,33 @@ describe('Geometry - Attr', () => {
     expect(geometryRef.current.records[1].children[0].size).toBe(3);
   });
 
+  it('size = {{ field, range }} 支持px', async () => {
+    const ref = {};
+    const context = createContext('size = {{ field, range }} 支持px');
+    const { type, props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
+          <Axis field="year" />
+          <Axis field="sales" />
+          <Point
+            x="year"
+            y="sales"
+            size={{
+              field: 'sales',
+              range: ['5px', '30px'],
+            }}
+          />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
+
   it('size = {{ field, range }} 用size大小来做分类', async () => {
     const context = createContext('size = {{ field, range }} 用size大小来做分类', {
       width: '380px',
diff --git a/packages/f2/test/components/interval/interval.test.tsx b/packages/f2/test/components/interval/interval.test.tsx
index 2f9476dd5..fbcb828aa 100644
--- a/packages/f2/test/components/interval/interval.test.tsx
+++ b/packages/f2/test/components/interval/interval.test.tsx
@@ -1,5 +1,5 @@
 import { jsx } from '../../../src';
-import { Canvas, Chart, Interval, Axis } from '../../../src';
+import { Canvas, Chart, Interval, Axis, Point, Line } from '../../../src';
 import { createContext, delay } from '../../util';
 const context = createContext();