在windows 10 上， firefox渲染Text会产生模糊。

[zxhd863943427]

在playground中，使用下面的代码可以复现：

import { Leafer, Group,Text } from 'leafer-ui'


const leafer = new Leafer({ view: window,fill:"#fff" })

const group = new Group()
var y = 64*4



for(var i=80;i>0;i--){
    const text = new Text({
    fill: '#000',
    text: 'aaaaaaaaaaaaaa',
    y:y,
    x:10,
    fontSize:8,
    })
    y+=9.7
    group.add(text)
}

leafer.add(group)

发现Text在firefox上的渲染清晰度与位置有关。

使用贴图功能与chrome上相同代码的渲染结果进行对比：

左边为firefox的渲染结果，右边为chrome的结果，差异应该还是比较明显的。

[leaferjs]

这个应该是浏览器底层对小数坐标的处理方式不同导致的，试试 pixelSnap:

https://www.leaferjs.com/ui/reference/config/app/base.html#pixelsnap-boolean

[zxhd863943427]

测试了一下，效果不是很大：

import { Leafer, Group,Text } from 'leafer-ui'


const leafer = new Leafer({ view: window,fill:"#fff",pixelSnap:true})
leafer.app.config.pixelSnap = true
const group = new Group()
var y = 64*4



for(var i=80;i>0;i--){
    const text = new Text({
    fill: '#000',
    text: 'aaaaaaaaaaaaaa',
    y:y,
    x:10,
    fontSize:8,
    })
    y+=9.7
    group.add(text)
}

leafer.add(group)

[zxhd863943427]

在调整窗口大小的时候，发现模糊的区域也随之发生变化，怀疑是窗口高度自适应的影响，在初始化时，手动设置了高度和宽度后，渲染字体明显清晰了，达到了与chrome相同的效果，以下是测试代码和图片：

import { Leafer, Group,Text } from 'leafer-ui'


const leafer = new Leafer({ view: window,fill:"#fff",height:800,width:300})

const group = new Group({})
var y = 64*4



for(var i=80;i>0;i--){
    const text = new Text({
    fill: '#000',
    text: 'aaaaaaaaaaaaaa',
    y:y,
    x:10,
    fontSize:8,
    pixelRatio:1
    })
    y+=8
    group.add(text)
}

leafer.add(group)

左边为Firefox，右边为chrome

[leaferjs]

谢谢反馈，后面我有时间测试一下