在Firefox中在画布上缩放文本看起来很糟糕

Question

似乎Firefox在缩放画布上的文字方面做得很糟糕。看看这个：

  <select class="form-control" [(ngModel)]="UpdateTeacher.TeacherId" name="TeacherName" value={{UpdateTeacher.TeacherId}} required #TeacherName="ngModel">
      <option *ngFor="let TeacherDetail of this.userService.TeacherDetails" 
         [value]="TeacherDetail.TeacherId">
        {{TeacherDetail.TeacherName}}
      </option>
 </select>

结果：

此处与Chrome进行了比较，两者均具有缩放功能。后者在这里做得很好。

Codepen：https://codepen.io/anon/pen/OvMGaK

你不必成为一个注意力差异的渲染坚果。 这是一个已知问题吗？我该如何解决？

Answer 1

我正在运行Firefox 59.0，这似乎不再是一个问题，所以我只是建议更新您的浏览器来解决这个问题。但是，根据mozilla documentation，如果没有为fillText指定第4个参数max-width，那么它将尝试使用尽可能小的宽度，这可能会导致一些问题。如果问题仍然存在于您的浏览器版本中，那么您可能需要尝试更改字母间距。这可以通过以下方式来完成：

ctx.canvas.style.letterSpacing = "5px";

这是一个非常hacky的解决方案，因为它涉及更改canvas元素本身的字母间距，虽然它有效，但它实际上不在文档中，因此不需要在所有浏览器上工作。最好的解决方案可能只是保持浏览器的更新和/或使用不同的字体。