shields 徽标_您的徽标，作为Web字体连字

最新推荐文章于 2022-03-25 10:12:30 发布
最新推荐文章于 2022-03-25 10:12:30 发布
阅读量542 收藏
点赞数
文章标签： python java html css 编程语言

shields 徽标

让我们看一下在网页上显示徽标的另一种方法。 通常，您将使用<img>标记来应对挑战。 也许您将通过CSS使用图像替换，也许甚至会尝试使用SVG文件，但是您是否考虑过通过设计自己的网络字体连字实现什么可能性？

准确品牌的重要性

首先，简单介绍一下品牌。 视觉识别（正确完成后）的设计非常彻底且非常明确。 印刷术，颜色，空格，变体–查看任何 产品或公司的公司品牌指南，您会很快意识到解释的微不足道。

徽标无法近似； 必须精确地复制它们，这就是为什么我们依靠图像文件将其显示在网页上的原因。

在网页上显示徽标

大多数网页都显示徽标（这使您想知道为什么没有<logo>或<brand>元素？）并且通常使用<img>标签实现它们： 

<a href="/" title="homepage" id="logo">
  <img src="/img/logo.png" alt="logo" />
</a>

或对锚的内容使用图像替换技术： 

<h1><a href="/" title="homepage" id="logo">Logo</a>
h1 a#logo {
font: 0/0 a;
text-shadow: none;
color: transparent;
background:url(/img/logo.png);
}

这可以。 标记显示“重要的标题，链接到主页，并带有可索引的（可访问的）内容来告诉我们它的含义”。 CSS将内容换成100％视觉上准确的品牌。

但是高像素密度屏幕的问题呢。 为了使上述技术在视网膜世界中起作用，在需要时必须提供第二个高分辨率的徽标版本。 或者是SVG版本。 两种可能性都有，但是如何通过设计自己的连字来依靠网络字体呢？

考虑一下：

  • 如果您已经在使用Web字体图标（为什么不呢？），那么在字体文件中修补其他字形意味着没有额外的服务器请求和很少的额外带宽。
  • 将徽标设置为字体格式意味着您可以根据需要使用CSS对其进行着色，并可以在页面上随意更改其颜色。
  • 使用连字意味着不需要图像替换技术（说了算，做完了，这有点麻烦）。

那么什么是连字？

有关详细说明，请查看我们的《网络印刷术剖析》 。 总而言之，连字是故意设计的字符对组合。 如果一个字体中的两个字符并排放置时显得笨拙（ fl是一个经典示例），则可以设计一个连字来提供帮助。 然后将连字字形“映射到”所讨论的字母组合（关联）。 当浏览器遇到该组合时，它将字母切换为单个连字。

这个原则也不仅适用于字母对 。 字形可以映射到整个字符串。

我们的连字标志符号将是一个假冒的应用程序徽标（名称为“ Vectr”；已删除最后一个元音以证明它是一个应用程序..），并将其映射到字符串“ Vectr”。

流程

毫无疑问， IcoMoon使此过程变得轻松起来。 在IcoMoon出现之前，您需要使用字体设计应用程序（ Inkscape的SVG字体编辑器是负担得起的少数几种方法之一）来对齐和映射每个字形。 然后，您可以将文件保存为好运，直接将其保存为TTF（TrueType），或者另存为SVG，之后再使用其他工具转换为TTF。 然后，最后，您将TTF上传到webfont生成器，以便为您提供最终产品。

使用IcoMoon，您所需要做的就是..

最后，教程

步骤1：矢量文件

在开始任何事情之前，我们将需要一个矢量形式的徽标。 可以在多种图形应用程序中打开和编辑许多矢量文件格式。 封装后脚本（EPS），后脚本（PS），可移植文档格式（PDF）和可缩放矢量图形（SVG）是处理矢量的一些常见示例。

在此示例中，我使用的是Adobe Illustrator，但是整个过程可以应用于其他应用程序（例如开源Inkscape）。

首先，请注意您的画板。 我们正在有效地设计字体字形，在TrueType环境下，它将是512、1024或2048像素的正方形。 这是一个约定，不是必需的，但是我们将选择1024px来给我们提供64x16的坚实网格； 设计大约16像素默认大小的字体的理想选择。

我们的字形将与整个画板正方形一起输出，有效地定义了我们的“ EM”度量。

设计整个字体时，在画布上相对放置所有字符非常重要，这样它们就可以沿着同一基线整齐地放置。

我离题了

将徽标正确放置在画板上后，我们会将文件另存为SVG。 在各种SVG设置中（就我们的目的而言）没有太大差异，只需使用默认值并单击“保存”即可。

第2步：上传到IcoMoon

启动IcoMoon.io Web应用程序。 IcoMoon（由非常聪明的@Keyamoon开发）使您可以选择'n'mix图标字形，将它们映射到您选择的字符，然后下载@ font-face包以在网络上使用。

它还允许你上传自己的字形（如SVG或TTF）添加到您的收藏。 导入我们刚刚制作的SVG文件，然后检查缩略图中的外观是否大致正确。

您可以通过按下铅笔按钮并单击缩略图来重新放置徽标并进行一些小的更改。 实际上，在编辑屏幕中，您可以看到徽标中每个手柄末端的球存在问题。

您看到形状相交的地方吗？ 我们还没有在Illustrator中将所有矢量对象正确地组合在一起，因此我需要返回并确保正确完成了操作。

一切就绪后，让我们构建一个图标集合。

步骤3：建立馆藏

选择所需的图标，包括徽标，然后单击“（生成）字体”。 此时，您将获得每个字形的预览，包括它们将映射到的字符或unicode实体。

您可以自己定义字符（如果需要），或者像我们这样，可以定义整个字符串以用作连字。

打开“首选项”菜单，然后选中“启用连字”复选框。 现在，我们可以在字形上方的框中输入自定义连字字符串。 在我们的例子中，“ Vectr”（当然是区分大小写的）。

在“首选项”窗口中，您还可以选择将字体下载为Base64，嵌入在CSS本身中，而不是作为单独的字体文件坐在服务器上。 我选择Base64编码，因为它可以为我们节省更多 HTTP请求。

步骤4：下载

现在，当您点击下载时，将为您提供功能齐全的演示； HTML文件，所有字体文件和随附CSS。

默认CSS使您可以选择所有具有[data-icon]属性的元素，或者直接在要应用字体文件的元素上直接使用选择的类。 我们还提供了许多有趣的印刷CSS规则。 其中一些是特定于浏览器的，但是所有这些都值得一看： 

speak: none;
/* Enable Ligatures */
-webkit-font-feature-settings:"liga","dlig";
-moz-font-feature-settings:"liga=1, dlig=1";
-moz-font-feature-settings:"liga","dlig";
-ms-font-feature-settings:"liga","dlig";
-o-font-feature-settings:"liga","dlig";
font-feature-settings:"liga","dlig";
text-rendering:optimizeLegibility;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;

有一些相当实验性的规则可确保在可能的情况下使用连字，然后还有一些其他（更标准的）规则可为有问题的元素重置文本显示。 在您看到的所有内容之前，请先speak: none; 这样可以防止相关设备“窃听”内容（在我们徽标的情况下可能没有必要）。 然后，您会注意到optimizeLegibility和webkit的font-smoothing ，这是确保在各种浏览器中以最佳方式显示font-smoothing所有良好做法。

步骤5：我们CSS

无论如何，现在暂时忽略这些样式， 我们要做的就是确保我们的logo元素具有新的字体-系列适用于它： 

<h1 class="logo">
<a href="#">Vectr</a>
</h1>
.logo {
font-family: 'vectr';
}

而已！ 每当我们的浏览器遇到带有“徽标”类，内容为“ Vectr”的元素时，就会显示我们的徽标。 现在，仅通过CSS，我们就可以独立于大小，颜色，各种其他CSS效果以及所有100％的分辨率进行更改。

我的大胖希腊警告

振作起来： IE9和更早版本不支持连字。 自版本10起，Opera也取消了对它的支持（尽管随着Opera转向Webkit ，这可能会很快改变）。 所有其他现代浏览器，包括移动平台，都可以很好地发挥作用，但是您需要确保拥有针对旧版本Internet Explorer的后备解决方案。

一种方法是在HTML标签上使用条件类 ： 

<!--[if lt IE 7 ]> <html class="ie6 lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7 lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9 lt-ie10"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

这些使您能够识别IE的所有版本。 早于IE10的所有内容都赋予lt-ie10类。 然后，您可以在较早的浏览器中否决徽标样式，从而定义一些替代Webfont连字的方式： 

html.lt-ie10 .logo {
   background: something-or-other-change-the-font-family-and-so-on;
}

其他资源

翻译自: https://webdesign.tutsplus.com/articles/your-logo-as-a-web-font-ligature--webdesign-11375

shields 徽标

daique1908
关注
img.shields.io README.md 制作徽标
羽的博客
10-25 1265
img.shields.io RERADME.md 制作徽标 官网： https://shields.io 优点： 只需修改链接，不用静态制作。 效果图： 快速开始 使用格式： 方式一 ：HTML版 <LABEL> ：需要的标签，例如springboot，jdk等，如有空格用%20代替 <MESSAGE> ：版本信息 <COLOR> ： 颜色 如蓝色blue等 <!--使用破折号“-”分隔符--> <img src="https://im
factory::shield:自定义Shields.io徽章
05-12
在IT行业中，Shields.io是一个广泛使用的开源服务，它提供了丰富的徽章生成器，用于展示项目的状态、版本信息、许可证等。"factory::shield:自定义Shields.io徽章"这个标题表明我们将讨论如何利用某种工具或方法创建...
shields 徽标_使用OnlineLogoMaker.com制作免费徽标
culing2941的博客
09-14 527
shields 徽标Logos have been lately very important for every Business, Entrepreneur, Blog, Website and much more. It helps to create a brand value for the associated entity. 徽标最近对于每个企业，企业家，博客，网站等等都非常重要。...
shields 徽标_响应标题和徽标–提示和陷阱
cune1359的博客
06-29 269
响应式Web设计的概念已经渗透到整个Web中，并成为前端开发人员的必备条件。 在现代世界中，不可否认响应式设计的价值，但是要完全理解如何正确设计响应式布局存在一些困难。 该主题可能会持续进行，因为网站上有如此众多的独特区域，但是专注于各个元素可以帮助您更好地理解用户的目标，以及如何通过响应式设计实现这些目标。 我想介绍标题，徽标和导航菜单的 设计提示 ，因为它们与响应式设计有关。 在将...
shields 徽标_所有徽标看起来都一样
weixin_26732311的博客
09-14 358
shields 徽标 重点 (Top highlight)Currently, we are facing such a graphic design phase when a lot of brands use to have very similar logos. More exactly, a lot of brands switched from having proper logos t...
shields 徽标_基本徽标设计的简单指南
cune1359的博客
06-26 392
当您想到徽标时，会想到什么？ 一个金色的拱形M，一堆直线和圆，或者仅仅是一个可爱的小形状？ 那么，为什么“徽标设计”必须只限于具有各种精美程序知识的高度专业的计算机怪才来完成呢？ 老实说，我自己从来都不了解。 通过我自己作为徽标设计者的经验，我可以放心地同意， 任何有想象力并且可以使用任何类型的软件 （甚至包括Microsoft Words） 都可以进行徽标设计。 为了证明我的观点，我们将...
shields 徽标_符号及其在徽标设计中的影响
cune1359的博客
07-06 319
图形设计师用来创建出色徽标的最具活力的工具之一是符号。 。 在设计公司徽标时，主要的事情之一就是定义身份，即清楚地代表公司是谁以及如何被感知。 精心执行的徽标为用户以及与徽标进行交互的所有人员具体化了身份。 现在，作为设计师，我们必须认识到并尊重赋予徽标这种力量的力量，以定义我们的目标是为客户创造高质量和有效的徽标。 在设计领域中，对于我们来说， 符号通常是图形元素的组合，这些图形元素代表...
Basic-Arduino-Web-Server.rar_arduino_arduino web server_web serv
09-24
标题中的“Basic-Arduino-Web-Server.rar”暗示了这个压缩包包含了一个关于使用Arduino构建基础Web服务器的教程或项目。Arduino是一种流行的开源电子原型平台，它允许用户通过编程来控制各种电子元件。在本案例中，...
Ada_Arduino_Shields
04-09
如果要使用其他核板，请使用Ada Drivers Library随附的Project Wizard选择您的板。 您将需要更改每个shield目录的src文件夹中的*_shield.ads文件的硬件地址。 您可以使用Adacore的GNAT Programming Studio或...
generator-shields:轻松地将屏蔽添加到您的自述文件中
06-04
轻松地将屏蔽添加到您的 README 文件中。 可用盾牌： --npm当前版本； --travis当前构建状态来自 ； --coverage从测试覆盖率; --climate来自代码气候率； --deps来自依赖项； --devdeps来自开发依赖项； --...
shields 徽标_信息图：如何设计完美的徽标
08-06 229
shields 徽标What is Logo? Logo means much more than only an image for customers to look at while they use a product or service. It is the face of an entire brand, a symbol that determines how people thi...
shields 徽标_符号，标志，文字标记：徽标类型的综合指南
weixin_26732881的博客
08-04 1231
shields 徽标Designers and non-designers alike struggle with common terminology when talking about brand marks, often using different terms interchangeably. When it comes to clarifying definitions, somet...
shields 徽标_是什么让徽标很棒
weixin_26715991的博客
08-16 399
shields 徽标 重点 (Top highlight)“I’ll know it when I see it.” “看到它我就会知道。” Yuck. uck To a designer, this non-specific direction can be frustrating to receive — but there is a glimmer of value hiding in ...
shields 徽标_我们如何准确地记住著名徽标的特征和颜色？
weixin_26732881的博客
08-03 1020
shields 徽标The logos of global corporations like Apple, Starbucks, Adidas, and IKEA are designed to create instant brand associations in the minds of billions who see them every day. But how accurately...
Github 徽章shields使用教程
热门推荐
岁月不饶人，我亦未曾饶过岁月
03-31 1万+
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766 大家平时在逛GitHub，Gitee，各大论坛博客的时候，都有很好看很漂亮的徽章，这里就简单写个使用教程，方便大家使用。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F7kCVqgp-1585489182113)(https://img.shields.io/badge/R...
网站徽章shields制作教程
欢迎来到 Baret~H 的博客
03-25 3011
平时在逛 Gitee、Github 等各大代码仓库时，往往能看到以下这种徽章式的网页链接，美观好看又方便，那么这个徽章是如何制作出来的呢？本文就带大家制作属于自己的徽章式链接。
shields小徽章是如何生成的？以及搭建自己的shield服务器
weixin_33869377的博客
09-30 2966
shields小徽章介绍 一般开源项目都会有一些小徽章来标识项目的状态信息，并且这些信息是会自动更新的。在shields的官网https://shields.io/#/, 上面有各种各样的小图标，并且有很多自定义的方案。 起因：如何给私有部署的jenkins制作shields服务？ 私有部署的jenkins是用来打包docker镜像的，...
shields 徽标_如何为您的网站制作徽标（适用于初学者的简单指南）
cumohuo9136的博客
09-06 1292
shields 徽标Do you want to make a logo for your website? Perhaps you can’t afford a professional designer, but you’re worried that your graphic design skills aren’t up to the task. 您想为您的网站制作徽标吗？ 也许您负担不...
GitHub常见标签生成教学，让你的开源库添加几分姿色。
上辈子作恶多端，这辈子写前端。
06-20 5381
一：经常逛GitHub的同学都不难发现好多大神写的开源库都有如下特征，贴了好多标签。 二：为了拉近与大神之间的差距，我一定要学会这个技能（其实就是为了装13）。找了半天终于找到了生成这种标签的网站。网址：shields.io网站首页，在这里你就可以看到那些大神经常用到的标签了在首页的最下面就是我们自己生成标签的地方了,先来看张生成的效果图，color也就是status的背景了。三：图片都生成好
green shields的python代码
最新发布
09-25
def __init__(self, max_shields=3): self.shield_count = max_shields def use_shield(self): if self.shield_count > 0: self.shield_count -= 1 print("使用了一次绿盾") else: print("没有剩余绿盾了")...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值