Can I write CSS rules so that emojis get different weight than other text?

user_1927561 0
Viewed 750

So here's my silly problem: Emoji can look bad when they are printed with high 'weight' as characters. This leads to a situation where, when you are defining your style sheet, you have to pick if you would like to make normal text look good (use bold) or if you would like emojis to look good (use normal).

Here's a jsfiddle to demonstrate: 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;
}

The Text looks more "heading-y" when it's bolded, the emojis look more "heading-y" when they are normal.

How can I solve this? Is there a way to apply different weight rules to emojis and 'regular' text?

Edit: The context for this is that, as you can see, mixing text and in the same elements makes for difficult typography. I'm trying to setup a static site generator to support attractively printing s and text in the same elements.

Edit #2: So I tried using @font-family and I have updated the jsfiddle showing the results. There seem to be two problems - the first is that I'm not sure how to specify the font weight for a fond under a particular style. I.e. how do I specify that, for example, Roboto should be 700 weight when "bold" and the Emoji sets should be 300 weight when "bold"?

The second, more insurmountable problem is that, even though the browser knows that it is using an font, the document rules say to use the document font (Roboto) and so it styles the emoji font with the Roboto font-family style. Firefox inspect showing font-family Roboto with Apple Symbol font

emoji css html
1 Answers

Sure you can. Just do something like this:

div {
  font-weight: bold;
}

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

Enclose the emoji text in something like a span, add a class to the span, and you can apply whatever CSS you want to to the class.

You could also use divs for both your text and your emojis, and set their display style to inline-block (or learn how to use display: flex and display: grid, which give you the best control of your elements' layout), but this is simpler. It has the disadvantage that span doesn't recognize vertical styles like height and upper and lower margins, though. (For more information, see inline elements.)

Using div tags with 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>

[Edit:] Now that I have a better idea of what you are looking for (thanks for clarifying), you should be able to get what you are looking for with the @font-face "at rule." Set up your emojis as a different @font-face from your text. (To do this properly, each @font-face directive will need to reference different source files, or the lower directive will override the higher one.) Then style them any way you like. This tutorial should get you started.

user_4904540
Related