Javascript HTML中奇怪的模糊文本（画布和svg）

我对字体有一种奇怪的行为，垂直（和水平）列后面的文本很模糊，但很难发现“列”。这在画布和带有chrome的svg上进行了测试。两者的行为几乎相同

看看JSFIDLE：

或者看看下面的片段

正如你所看到的，我有非常尖锐的字符，也有非常模糊的字符，这取决于它的印刷位置

//使用画布进行测试
var canvas=document.querySelector（“#canvas”）；
var ctx=canvas.getContext（'2d'）；
var coef=1；//尝试hidpi画布，增加该值以增加比率
canvas.width=300*coef；
canvas.height=300*coef；
document.fonts.onloadingdone=（）=>{
ctx.fillStyle='#ffffff'；
ctx.imageSmoothingEnabled=假；
ctx.textb基线='中间'；
ctx.font=（13*coef）+“px visitor2”；
对于（变量i=1；i<19；i++）{
var x=10；
变量y=10*i*coef+i；
ctx.fillText（“aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
}
}
//与svg相同的测试
var svg=document.querySelector（'#svg'）；
对于（var j=1；j<19；j++）{
var x=10；
变量y=10*j+j；
var element=document.createElements（'http://www.w3.org/2000/svg","文本",；
元素setAttributeNS（null，'x'，x+''；
元素setAttributeNS（null，'y'，y+''；
element.style.fontFamily='visitor2'；
element.style.fontSize='13px'；
element.style.fill='#ffffff'；
var txt=document.createTextNode（“aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
元素appendChild（txt）；
appendChild（元素）；
}

#画布，
#svg{
背景：黑色；
宽度：300px；
高度：300px；
}
@字体{
字体系列：visitor2；
src:url（'https://ryder-one.github.io/hmap/visitor2.woff格式（'woff'）；
}

---

这主要是字体的错误

其字距设置不正确，将使这一系列字符落在浮动坐标上。
在某个时刻，浏览器必须触发字体平滑算法。默认情况下，不同的操作系统和浏览器会使用不同的字体平滑算法，不同像素密度的屏幕会有或多或少明显的瑕疵；这可能就是为什么其他人看不到与你（我）相同的结果

除了向设计师抱怨之外，您没什么可做的，它甚至可能与HTML一起出现：

@font-face{
字体系列：visitor2；
src:url（'https://ryder-one.github.io/hmap/visitor2.woff格式（'woff'）；
}
#试验{
字体：13px visitor2；
线高：10px；
填充：10px；
}

aaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaa

请注意，上面的run按钮工作不正常

run按钮工作正常，只是您没有在绘制到画布之前等待字体加载。。我已经对您的代码片段进行了相当多的更新，以使其正常工作，这比跳到小提琴上要好……）SVG在chromeTo上看起来非常清晰。对于您的问题，我不确定我们在看什么问题，我在这里没有看到任何奇怪的模糊文本。小字体，是的，但这里看起来很锐利。windows上的Chrome 73.0.3683.103。感谢您提供的加载程序@Keith。我编辑这篇文章是为了添加一个问题的截图。你可能想更新这张图片，因为它并不完全显示你在说什么。我建议显示两幅图像：一幅基本图像（周围没有任何文本等，只需在两个上下文中显示“AAAAA”字符串作为排版），然后显示一些剪切的缩放，清晰地显示锐利与模糊。哇，非常好的回答，谢谢。出于很多原因，我选择SVG而不是画布，所以我认为如果我保留这种字体，我会被模糊所困扰。