3

问题截图：

在此处输入图像描述

我正在尝试获得相同的字体质量，例如Font Squirrel 的示例字体小部件，但字体一直很粗糙。在Photoshop中很流畅。注意：“懒狗”部分不是我加粗的，它自己做的。

这是PHP：

<?php 
putenv('GDFONTPATH=' . realpath('.'));

$font = $_GET['font'] . '.ttf';
$text = 'The Quick Brown Fox Jumps over the Lazy Dog';

// Create the image
function imageCreateTransparent($x, $y) { 
    $imageOut = imagecreate($x, $y);
    $colourBlack = imagecolorallocate($imageOut, 0, 0, 0);
    imagecolortransparent($imageOut, $colourBlack);
    return $imageOut;
}

$image = imageCreateTransparent(600, 800);

// Create some colors
$white = imagecolorallocate($image, 255, 255, 255);
$grey = imagecolorallocate($image, 128, 128, 128);
$black = imagecolorallocate($image, 0, 0, 0);
imagefilledrectangle($image, 0, 0, 399, 29, $white);



// Add the text
imagettftext($image, 20, 0, 10, 20, $black, $font, $text);
imagepng($image);
imagealphablending($image, true);
imagedestroy($image);
?>

HTML：<img src="fontgen.php?font=Aller_Rg" alt="" />

我怎样才能获得字体的高质量结果？

4

2 回答 2

15

您只将背景的一部分设置为白色，其余部分是透明的。

当字体绘制在白色背景上时，黑色文本会被消除锯齿，使其看起来平滑，这导致字体周围的像素被绘制为两种颜色的混合，这也使字体看起来更小。

右侧没有背景颜色，因此抗锯齿无法正常工作。绘图算法不是在字体颜色和背景颜色之间混合，而是对任何被字母甚至部分覆盖的像素使用原始字体颜色。

这使得字母看起来“粗体”，因为边缘像素现在是黑色的，而不是灰色阴影。

正确解决此问题的方法是使用具有适当背景颜色的图像，即使该背景颜色是透明的。这使得图像库使用适当的 alpha 通道（这是进行 alpha 混合的唯一明智方法）而不是使用基于索引的 alpha，其中只有一种“颜色”是透明的，而所有其他颜色都是完全不透明的。

$font = '../../fonts/Aller_Rg.ttf';
$text = 'The Quick Brown Fox Jumps over the Lazy Dog';

// Create the image
function imageCreateTransparent($x, $y) {
    $imageOut = imagecreatetruecolor($x, $y);
    $backgroundColor = imagecolorallocatealpha($imageOut, 0, 0, 0, 127);
    imagefill($imageOut, 0, 0, $backgroundColor);
    return $imageOut;
}

$image = imageCreateTransparent(600, 800);

// Create some colors
$white = imagecolorallocate($image, 255, 255, 255);
$grey = imagecolorallocate($image, 128, 128, 128);
$black = imagecolorallocate($image, 0, 0, 0);

imagefilledrectangle($image, 0, 0, 399, 29, $white);

//// Add the text
imagettftext($image, 20, 0, 10, 20, $black, $font, $text);
//imagealphablending($image, true); //not needed as we created the image with alpha
imagesavealpha($image, true);
//imagepng($image, '../../var/log/wtf5.png');
imagepng($image);
imagedestroy($image);

这将使字体大小正确，因为抗锯齿将正常工作*并且图像将在适当的地方透明，例如使用上面的代码创建的图像，显​​示在红色背景上。在此处输入图像描述

具有白色背景的图像位是白色的，透明的图像位让红色通过，并且文本对两者都正确进行了抗锯齿处理。

*假设您想要对设置的背景颜色进行抗锯齿处理，这并非总是如此，但可能就在这里。

于 2013-06-08T13:53:14.807 回答
0

我怀疑这是因为您仅在左侧 400 像素处将背景设为白色。在右边它可能仍然是透明的并且有一些副作用。Ther是您之前创建的白色背景之外的第一个字母。

于 2013-06-08T13:12:25.340 回答