[英]Completely match HTML5 Canvas font to Snapchat's font
我正在尝试使用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中无法更改。
我能做什么?
Snapchat可能会嵌入非常具体的变体或类似于Helvetica的字体。 这并不意味着加载页面的用户(包括在您自己的计算机上)将在系统上安装该字体。
例如,如果用户未安装字体,则浏览器将寻找相似的字体,例如,它将在Windows上使用Arial,如果不可用,则使用其他sans-serif字体。 在Mac和Linux上也是一样。 这意味着它可能会紧密匹配,但不会是相同的字体。 如果他们不使用网络字体,则可能是在其他OS上拍摄了快照,那么您正在使用的结果是呈现了不同的字体。
换句话说,当您将“ Helvetica”指定为字体系列时,系统将尝试在该系列中查找一种字体,但是并没有说明Helvetica是您将获得的字体。 浏览器将尝试查找正在使用的系统上最接近的匹配字体。
您必须嵌入与网络字体相同的字体,否则无法保证字体相同。
要找出他们正在使用哪种字体(如果有),请打开他们正在使用的样式表。
我的2美分
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.