Magento 2:基础的图标字体

Magento 2:基础的图标字体

2016年10月18日发布 in 发展历程
为什么我们仍然进行贸易展览
为什么我们仍然进行贸易展览
十月12,2016
自定义Etento'使用XSLT的订单导出XML输出
将XSLT与Xtento结合使用’订单导出Magento模块
2016年10月27日

图标在网络上具有存储的历史记录。在过去的糟糕日子里,它们像使用单个图像元素实现的网页上的任何其他图像一样被对待。这带来了一些负面影响,其中语义不佳和HTTP请求过多,因为页面上的每个图标图像都是单独加载的。一种改进了图像的方法 替代 使用CSS,伪元素和Sprite。基于CSS的方法使HTML语义不受干扰,并且通过不必要的资产请求将Sprite图像缩减为单个大图像并结合了背景定位,而不是每个图标一个图像。

当然,即使是CSS Sprite技术,其主要缺点还是在于’基于图像。这意味着无论您是要创建自己的图标还是从其他位置拉入精灵,都需要使用图像编辑软件来创建或编辑精灵。这也意味着,最终,您的图标是一组平面像素,受分辨率限制。 (请注意Magento 1响应主题’为了适应像Retina设备这样的高像素密度显示器,我们使用两种不同大小的Sprite图像。)如今,一种迅速获得广泛采用的方法是将图标字体完全从故事中剔除。 Magento 2’的原生主题完全采用了这种技术。

使用字体作为图标很有意义,这有很多原因。实际上,肖像学与文字的共通之处多于内容图像。图标是向观众传达含义的字形。用技术术语来说,字形是可以扩展到任何分辨率的矢量信息。当然如果你’一个曾经使用基于图像的图标的Web开发人员,’生成自己的字体文件可能会给您带来不小的不适。幸运的是,图标字体的采用日渐广泛,这意味着您可以使用许多出色的工具。原生的Magento主题提供了实现所需的框架,在本文中,我’ll向您介绍一个基础,使您可以更好地自定义Magento’s icons easily.

Magento 概述’s Icon CSS

您’ll find the icon font files for the Magento Blank theme 在 lib/web/fonts/Blank-Theme-Icons (in the typical multiple file formats to support all user agents). lib/web/css/source/lib/variables/_typography.less defines the font icon path and name, and 在 the Magento Blank theme web/css/source/_icons.less uses these to define the icon font face itself, to be used 在 all CSS declarations.

The final relevant piece to be aware of is lib/web/css/source/lib/variables/_icons.less, where LESS variables are defined to store the Unicode characters that correspond to the right font glyphs for each icon. This will be a handy reference for you when needing to re-assign said character codes to new icons.

The defined icon font face and the character variables are used throughout the theme LESS code to define icons, usually through a call to the lib-icon-font mix-in.

有了有关用于自定义图标字体的CSS结构的信息,您可以’有一个很好的起点;更改定义图标字体路径和名称的变量,然后您’ve已成功用您自己的图标替换了本机图标。但这仍然留下了如何首先生成自己的图标字体的问题。

字体库和工具

您’为Magento主题定义自定义图标有两个主要选项:创建自己的图标,或从可用的库中挑选一些图标。有在线工具支持这两种方法,并允许您将自定义创建内容包装成最终字体。一个很好的例子,这里介绍的是 爱可梦 .

该字体生成工具具有许多免费和付费的图标集,您可以从中进行选择。它还支持对Magento图标自定义很重要的其他功能:导入现有字体,导入自己的自定义图标SVG,以及将选择作为基于JSON的配置导入/导出,以便您可以直接从已配置的图标集中进行选择。 爱可梦 还具有相当强大的编辑界面,可用于调整单个图标的缩放比例和位置。

使用IcoMoon,您可以从导入的字体开始,例如Magento ’的本机图标,通过删除一些并添加其他图标来进行所需的调整,然后重新导出完成的字体。 Magento 本地提供的五种文件类型中,IcoMoon’s仅缺少woff2。那’不过,这不是问题,因为还有很多用于字体文件类型转换的工具。尝试 一切字体 。爱可梦’的最终程序包方便地包括JSON配置和示例CSS,尽管您’我会回避说CSS支持Magento’s native structure.

注意事项和增强的入门包

我刚才说过,一旦你’已将您的自定义图标字体替换为Magento’s的本机图标就像为字体路径和名称设置正确的LESS变量一样简单。如果真是如此,那将是很好。不幸的是,如果你’重新使用Magento Blank作为主题的起点并计划使用可用的库对其进行自定义,您’可能会遇到障碍:“空白”字体中的图标相对于其边框的大小明显小于您使用的典型字体’可以在IcoMoon上找到。将空白替换与Blank主题中的字体大小和行高结合使用,将导致图标与空格相比异常大’re used.

有两种方法可以解决此问题。第一种是使用IcoMoon缩小自定义集中使用的所有图标’的上述编辑界面。使用这种方法,可以避免任何CSS更改,但是您可以’您必须触摸要包含在自定义字体中的每个图标。

第二种方法是自定义CSS字体大小和行高,以匹配更典型的图标大小。这样做的好处是,每次插入新图标时,不必担心图标的大小,但是它会带来一些前期开销。如果在LESS变量中为这种定制定义了一些典型的图标大小,那就太好了。不幸的是,在Magento中的各个模块LESS源文件中,这些大小的定义要分散得多。它’那么,幸运的是,Magento Luma示例主题包含一个更通常大小的图标字体以及相应的字体大小。

如果要使用主题扩展更瘦,更香草的Magento Blank,而不是扩展Luma,后者至少提供了合适的样板,可以从中提取正确的样式以标准化图标大小。然后’s exactly what I’ve done 在 这个入门主题包。此主题扩展了“空白”,但使用Luma图标字体,其中包含适当的CSS重置大小。您会注意到,这些重置包含在主题中’s _extend.less, meaning that it supersedes rather than replaces the baseline styles. While this leads to slightly more bloated compiled CSS, it’为了避免完全复制大量的核心主题文件,需要做出权衡,因为上述文件中的绝大多数样式都可以’t change from Blank. (The resulting _extend.less also provides a precise reference for which relevant styles should be tweaked if further re-sizing is needed.)

请注意,此软件包正在开发中,您可能会发现’我错过了需要进一步调整尺寸的地方。

一起拉

由于“空白”主题的大小问题,您应该首先确定要对自定义图标采取以下哪种方法:

  • 方法A:调整图标大小以匹配Blank主题中的CSS大小
  • 方法B:直接扩展Luma主题
  • 方法C:实现CSS以匹配更典型的图标大小

哪种方法最好?这可能取决于您打算使用嵌入式替换自定义的图标数量。如果你’如果只更换少数几个,方法A可能最适合您。如果你’通过全新批发的图标集,确实可以给您的主题带来独特的风味,但是,方法B或C可能是可行的方法。

如果你’重新使用方法C,获得 此入门图标主题. 您 can 在 stall and extend this theme, or copy its styles directly 在 to your own theme.

  1. 在( 爱可梦 ,请导入SVG字体文件作为您的起始图标字体(例如Luma-Icons)。导航到IcoMoon应用程序并使用导入图标。方便地,您导入的字体将被收集到自己的字体集中。
  2. 对于要替换的图标,从集合中删除现有的字形。
  3. 选择您的替换图标。如果需要,可使用图标库添加其他免费或付费图标集。然后选择替换项,然后从自定义集的设置菜单中选择“将所选内容复制到集”。
  4. 如果你’已创建自己的自定义图标,请使用自定义集的设置菜单中的导入到集。
  5. Switch to the Generate Font tab at the bottom of the 爱可梦 在 terface and make sure to set the correct Unicode character values for all new icons. Use the variable reference 在 lib/web/css/source/lib/variables/_icons.less. (If you’由于不确定哪些字符代码与哪些图标匹配,您可以在删除原始字体之前以初始导入的字体记下它们。)
  6. 如果你’重新使用方法A(即调整图标大小以匹配Blank主题的CSS),在IcoMoon中切换到“编辑”模式,选择每个新图标,然后使用“Scale”缩小图标尺寸以匹配默认空白图标的功能。
  7. 命名您的字体。使用“Edit Info”从图标集的设置菜单中。
  8. 通过切换到界面底部的“生成字体”选项卡下载字体包,然后选择“Download” from the same tab.
  9. 获取woff2文件格式以四舍五入Magento为其默认字体提供的五种格式。前往类似的资源 一切字体 并使用转换工具。
  10. Copy all font file types from the font directory of your downloaded package 在 to your theme at web/fonts.
  11. In web/css/source/_theme.less 在 your theme, set @icons__font-path and @icons__font-name appropriately with the file path and name of your new icon font.
  12. 如果你 discover you need any further tweaks to icon CSS sizing, use web/css/source/_extend.less to implement these tweaks.

2 评论 s

  1. 布拉德 说:

    嗨,克里斯,真的很棒!也许您可以帮我吗?=)
    我用了这行代码“-o-transform:scale(1);”在Opera中正确缩放我的图标,但是没有’帮帮我。也许是因为我专门使用这些图标– //mobiriseicons.com/
    他们可能有什么问题吗?你怎么看?并感谢您的教程!

    • 克里斯·南宁加 说:

      看起来该图标集同时支持SVG和字体。如果你’重新使用前者,可以’真的这么说。如果字体是本文主题,则无需进行任何转换。只需使用字体大小即可控制图标的大小。

发表评论

您r email address will not be published. 必需的地方已做标记 *

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.