PHP / HTML5 / css3：为给定文本生成Word Art

Question

我想生成在http://cooltext.com/等网站中生成的艺术字/字样式。我的期望是，当我输入文字和样式时，我想将样式字作为图像。

欢迎您提出所有建议和意见。

****为了达到我的预期输出****

我应该使用相关字体吗？或者我应该使用任何PHP / HTML5 / CSS3技术？

由于我是上述所有语言的初学者，您的输入对我来说很有价值。

由于

Answer 1

使用webfonts并使用CSS设置样式。

使用Google提供的Font Squirrel webfont generator或网络字体创建您自己的网络字体。请确保您拥有使用webfont的许可。 webfont通常是一些文件，用于各种浏览器，因此我会将它们放在一个文件夹中以方便使用。

在CSS中，webfont使用有两个阶段：

1. 定义font-face。
2. 将font-family用于特定的CSS元素/ classes / id's

例如： 假设您有一个名为Alef的webfont。你生成它，在文件夹中你得到8个文件 - 4个常规，4个粗体。对于每个组，您都有扩展名为.eot，.woff，.ttf和.svg

的文件

在CSS文件中定义font-family

@font-face {
font-family: 'Alef';
src: url('Alef-Bold.eot');
src: url('Alef-Bold.eot?#iefix') format('embedded-opentype'),
     url('Alef-Bold.woff') format('woff'),
     url('Alef-Bold.ttf') format('truetype'),
     url('Alef-Bold.svg#alefbold') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Alef';
src: url('Alef-Regular.eot');
src: url('Alef-Regular.eot?#iefix') format('embedded-opentype'),
     url('Alef-Regular.woff') format('woff'),
     url('Alef-Regular.ttf') format('truetype'),
     url('Alef-Regular.svg#alefregular') format('svg');
font-weight: normal;
font-style: normal;
}

注意上面CSS中的font-family名称和font-weight定义。相同的font-family可以使用普通和粗体字体，以及普通和斜体字体样式。

为CSS元素/ class / id

设置font-family

p, .alef, #someid {
  font-family: Alef;
}

使用CSS为文本添加效果

以下是一些text effects for example, by css3gen.com 例如，.3dtext类上的3D文本：

.3dtext {
  color:#000000;
  background-color:#ffffff;
  text-shadow:2px 2px 0 #bcbcbc, 4px 4px 0 #9c9c9c;
}

就是这样！