真是新年都有新气象!稳定优质的枫叶主机(这软文天衣无缝…可惜此处没有软妹币交易)在2017新年到来之际也更换了 LOGO ,所以我以更新本博客上原来的字体矢量图标为例记。

首先在网页源文本中找到了这个图片地址,下载后 Photoshop 打开,使用钢笔工具画出 LOGO 的外框和内镂空,选择“导出路径到 Illustrator ”,这时我们就得到了 .AI 格式的文本标记矢量。
矢量路径
捣鼓网页的可能更亲爱 .SVG 格式,对比两种格式中 Path 的文本标记,大同小异,稍微改一下就成了 SVG 。这里我使用自己粗略写的小工具 AI to SVG 快速得到 Path 值,即 .SVG 字体文件中 glyph 标签的 d 属性值。还直观的看到描边儿路径的图形。
SVG路径
于是可编凑出 .SVG 字体文件。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>xcymeIconFont</metadata>
<defs>
<font id="xcyIF" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#xf297;" glyph-name="fyzhiji" d="M1023.8 502.9  C907.1 -78.5 354.9 -78.5 144.3 175.3  C-197.2 513.1 157.8 1183.5 710.2 982.7  C591.6 789.2 788.8 513.1 1023.8 502.9 Z M506.9 844.5  C-197.2 710.3 433.8 -236.3 828.2 394.8  C631.0 434.2 512.7 631.4 506.9 844.5 Z" />
</font>
</defs>
</svg>

建议,借助网上在线转换的网站将 .SVG 字体转换为 .TTF 格式,兼容更广。

最后,将字体图标放到网页上时一定抓住“字体名称”这个关键,否则不会正确显示这个“奇奇怪怪”的“字”。

.fyzhuji {
  font-family: 'xcyIF' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

字体指定好了,再明确具体是显示哪一个字 .fyzhuji::before {content: '\f297';}。这样我们就把矢量的字体图标放到网页中了。
矢量图标

其他要点笔记
  • 字体是矢量图形,所以几号大字都不失真
  • SVG还具体分矢量图形文件还是字体文件。使用不同标签
  • SVG 与 AI 还有 HTML5 的 CANVAS ,他们的复杂的路径都是用 Bézier 参数曲线。标记文本大同小异
  • SVG 和 CANVAS 是 W3C 的推荐标准
  • 正常图像画出边框与内镂空路径导出成 AI 或 SVG,可发现路径是“垂直翻转”态,但是是这种垂直翻转的路径做出字体,再显示出来时是正常态(无垂直翻转)。所以,想矢量化正常图像,则要得出垂直翻转后路径,再描边着色等,显示出的 SVG 矢量图形才是正确的
  • 在矢量世界里,路径区分左右侧或叫走向,顺时针闭合的一般默认为取闭合路径内部填充,逆时针闭合的,一般默认为取闭合路径内部镂空,归纳为取路径外沿域或叫右手侧域。在 SVG 矢量图形文件中,可以用标记改变此行为。所以在画中有镂空(透明)区域的图形时,路径起笔落笔这个走向是要注意的关键

Next Post Previous Post