时间戳

首页 > 解决方案 > 我可以编写 CSS 规则以使表情符号的权重与其他文本不同吗？

html - 我可以编写 CSS 规则以使表情符号的权重与其他文本不同吗？

问题描述

所以这是我的愚蠢问题：当表情符号以高“权重”作为字符打印时，它们可能看起来很糟糕。这导致了一种情况，当您定义样式表时，您必须选择是想让普通文本看起来不错（使用粗体）还是想让表情符号看起来不错（使用正常）。

这是一个 jsfiddle 来演示：https ://jsfiddle.net/xjqaLypb/10/

HTML：

<body>
  <div class="a">
  TEXT
  </div>
  <div class="b">
  TEXT
  </div>
</body>

CSS：

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: emoji;
  src: local('Apple Color Emoji'),
       local('Apple Symbols'),
       local('Android Emoji'),
       local('Segoe UI'),
       local(EmojiSymbols),
       local(Symbola),
       url('font/Symbola-Emoji.eot?#iefix') format('embedded-opentype'),
       url('font/Symbola-Emoji.woff') format('woff'),
       url('font/Symbola-Emoji.ttf') format('truetype');
  font-weight: 300;
  /* Emoji unicode blocks */
  unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
}

body {
  font-family: 'Roboto', sans-serif;
}

.a {
    font-weight: 700; /* bold */ 
    font-size: 2rem;
}

.b {
    font-weight: 400; /* normal */ 
    font-size: 2rem;
}

文本加粗时看起来更像“标题-y”，表情符号正常时看起来更像“标题-y”。

我该如何解决这个问题？有没有办法对表情符号和“常规”文本应用不同的权重规则？

编辑：如您所见，将文本混合在相同的元素中会导致排版困难。我正在尝试设置一个静态站点生成器以支持在相同元素中有吸引力地打印 s 和文本。

编辑#2：所以我尝试使用@font-family，并更新了显示结果的jsfiddle。似乎有两个问题-第一个是我不确定如何为特定样式下的喜欢指定字体粗细。即我如何指定，例如，当“粗体”时，Roboto 应该是 700 重量，而当“粗体”时，表情符号集应该是 300 重量？

第二个更难以克服的问题是，即使浏览器知道它正在使用一种字体，但文档规则说要使用文档字体（Roboto），因此它使用 Roboto 字体系列样式设置表情符号字体的样式。 Firefox 检查使用 Apple Symbol 字体显示 font-family Roboto

标签： htmlcssemoji

解决方案

你当然可以。只需执行以下操作：

div {
  font-weight: bold;
}

.emoji {
  font-weight: 400;
  color: green;
}
<div class="a">
  TEXT<span class='emoji'> This is green </span>
</div>

将表情符号文本包含在跨度之类的东西中，向跨度添加一个类，然后您可以将任何您想要的 CSS 应用到该类中。

您也可以同时使用divs您的文本和表情符号，并将它们的display样式设置为inline-block（或学习如何使用display: flexand display: grid，这可以让您更好地控制元素的布局），但这更简单。但是，它的缺点是span不能识别垂直样式，例如height上下边距。（有关更多信息，请参阅内联元素。）

使用div标签display: inline-block：

    div { 
      font-weight: bold; 
    }

    .inline-div {
      display: inline-block;
    }

    .emoji {
      font-weight: 400;
      color: green;
    }
  <div class="a">
    <div class="inline-div">TEXT</div>
    <div class="inline-div emoji">This is green </div>
  </div>

[编辑：]现在我对您要查找的内容有了更好的了解（感谢您的澄清），您应该能够通过@font-face“at 规则”获得所需的内容。将您的表情符号设置为与@font-face文本不同。（要正确执行此操作，每个@font-face指令都需要引用不同的源文件，否则较低的指令将覆盖较高的指令。）然后以您喜欢的方式设置它们的样式。本教程应该可以帮助您入门。

推荐阅读