Javascript 将HTML5画布字体与Snapchat完全匹配'；s字体

我正在尝试用HTML5画布重新创建Snapchat“快照”。让我感到困惑的是让字体看起来一样。Snapchat使用的字体似乎是Helvetica，但我无法让我的文本看起来与真正的snap相同

下面是我尝试匹配的字体。我在一个快照的实际屏幕截图上绘制了我的文本，因此很容易比较。您可以编辑JavaScript变量以尝试匹配文本（JSFiddle:）

HTML:

JavaScript:

//--- EDIT THESE ----------------
// text styles...
var fontFamily = 'Helvetica';
var fontSize = '35px';
var fontWeight = 'normal';
// http://css-tricks.com/almanac/properties/f/font-weight/

var onTop = false;
// set this to "true" to place our text on top of the real text (for more precise comparing)
var differentColours = false;
// draw our text/background different colours, making it easier to compare (use when "onTop" is "true")

// tweak where the text is drawn
var horOffset = 2;
var vertOffset = 0;
//-------------------------------



var can = document.getElementsByTagName('canvas')[0];
var c = can.getContext('2d');
c.fillStyle = 'white';
c.fillRect(0, 0, can.width, can.height);
var img = document.getElementsByTagName('img')[0];
c.drawImage(img, 0, 0);

var top;
if(onTop) top = 531;
else top = 450;

if(differentColours) c.fillStyle = 'orange';
else c.fillStyle = 'black';
c.globalAlpha = 0.6;
c.fillRect(0, top, can.width, 74);
c.globalAlpha = 1;
var text = 'Template example thingy $&@?! 123';
if(differentColours) c.fillStyle = 'red';
else c.fillStyle = 'white';
c.textAlign = 'center';
c.font = fontWeight + ' ' + fontSize + ' ' + fontFamily;
c.fillText(text, can.width/2 + horOffset, top + 50 + vertOffset);

JSFiddle：

看起来其中一个问题是字母间距，但这在HTML5画布中是不可能改变的

---

我能做什么？

Snapchat可能会在Helvetica中嵌入一种非常特殊的变体或类似的字体。这并不意味着加载页面的用户（包括在您自己的机器上）将在系统上安装该字体

如果用户没有安装字体，浏览器将查找类似的字体，例如，它将在Windows上使用Arial，如果不可用，则使用另一种无衬线字体。在Mac和Linux上是一样的。这意味着它可能会非常匹配，但不会是相同的字体。如果他们不使用web字体，快照可能在不同的操作系统上进行，那么您使用的是不同的字体，从而呈现不同的字体

或者换句话说，当您将“Helvetica”指定为字体系列时，系统将尝试在该系列中查找字体，但没有给出Helvetica是您将获得的字体。浏览器将尝试查找所用系统上最接近的匹配字体

您必须嵌入他们用作web字体的相同字体，否则无法保证字体相同

要了解他们使用的字体（如果有），请打开他们使用的样式表

---

我的2美分..

谢谢，我只是仔细看了看，发现“t”上有一个倾斜。看起来我的电脑又回到了Arial，但是当我运行

xlsfonts | grep helvetica

it时。你知道可能是什么问题吗？再次感谢，我不知道要花多长时间才能意识到这一点。@CoffeeCodeTouch您安装的Helvetica可能是本地安装的PS字体，用于f.ex Adobe suite，但无法通过系统使用（不过这里只是猜测）。如果您可以让它进入系统使用，那么应该选择它，但对于计算机上的其他用户来说，情况不一定如此。需要记住的是：）我想在我的HTML中链接标准Helvetica字体样式表是不可能的，因为它不是免费字体？这是确保每个人在我的服务器上呈现文本并将其作为图像发送回的唯一合法方法吗？@CoffeeCodeTouch是的，IIRC Helvetica有一些许可限制，虽然字体本身不受保护，但在某些形式（如postscript）中，它们实际上是作为软件获得许可的。但我可能不准确，我不是律师，所以。。服务器方法可能会更好地确保每次都得到相同的结果。对于授权，我会检查字体的法律文档

img {display:none}

//--- EDIT THESE ----------------
// text styles...
var fontFamily = 'Helvetica';
var fontSize = '35px';
var fontWeight = 'normal';
// http://css-tricks.com/almanac/properties/f/font-weight/

var onTop = false;
// set this to "true" to place our text on top of the real text (for more precise comparing)
var differentColours = false;
// draw our text/background different colours, making it easier to compare (use when "onTop" is "true")

// tweak where the text is drawn
var horOffset = 2;
var vertOffset = 0;
//-------------------------------



var can = document.getElementsByTagName('canvas')[0];
var c = can.getContext('2d');
c.fillStyle = 'white';
c.fillRect(0, 0, can.width, can.height);
var img = document.getElementsByTagName('img')[0];
c.drawImage(img, 0, 0);

var top;
if(onTop) top = 531;
else top = 450;

if(differentColours) c.fillStyle = 'orange';
else c.fillStyle = 'black';
c.globalAlpha = 0.6;
c.fillRect(0, top, can.width, 74);
c.globalAlpha = 1;
var text = 'Template example thingy $&@?! 123';
if(differentColours) c.fillStyle = 'red';
else c.fillStyle = 'white';
c.textAlign = 'center';
c.font = fontWeight + ' ' + fontSize + ' ' + fontFamily;
c.fillText(text, can.width/2 + horOffset, top + 50 + vertOffset);