将 HTML5 Canvas 字体与 Snapchat 的字体完全匹配

Question

我正在尝试使用 HTML5 Canvas 重新创建 Snapchat“快照”。让我难过的部分是让字体看起来一样。 Snapchat 使用的字体似乎是 Helvetica，但我无法让我的文本看起来与真正的快照相同。

这是我匹配字体的尝试。我已经在快照的实际屏幕截图上绘制了我的文本，因此很容易比较。您可以编辑 JavaScript 变量以尝试匹配文本（JSFiddle：http://jsfiddle.net/9RB88/1/）。

HTML：

<img src='http://i.imgur.com/tivQ8xJ.jpg'>
<canvas width='640' height='1136'></canvas>

CSS：

img {display:none}

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：http://jsfiddle.net/9RB88/1/

似乎其中一个问题是字母间距，但这在 HTML5 Canvas 中是不可能改变的。

我能做什么？

Answer 1

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

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

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

您必须嵌入与他们作为网络字体使用的完全相同的字体，否则无法保证字体会相同。

要找出他们正在使用的字体（如果有的话），请打开他们正在使用的样式表。

我的 2 美分..