title: css locale changes text for logo to be obscure
body: <p>I have a logo with text that is in sans-serif but when I change locale(language) of the page to Chinese the text isn't the same as in English you can still read it as English and that's all good but it forces my text in the logo to look odd. My question is can I force just that part of the text to look just as it is in English and keep it the same throughout the whole site so it looks the same. Is there a piece of code that I can enforce on that particular text to keep it the same in English through css. It's like the text changes shape when locale changes for that language</p>
  
  <pre><code>.neon {
  position: relative;
  overflow: hidden;
  filter: brightness(200%);
  display: inline-block;
  height: 35px;
  
  @-moz-document url-prefix() {
      filter: brightness(150%);
  } 
  
  .text {
      background-color: black;
      color: white;
      font-size: 35px;
      font-weight: bold;
      font-family: sans-serif;
      line-height: 1;
      text-transform: uppercase;
      position: relative;
      user-select: none;
  
  
  
  
      &amp;:before {
          content: attr(data-text);
          position: absolute;                    
          color: white;
          line-height: 1;
          filter: blur(0.02em);
          mix-blend-mode: difference;
      }
  }
  
  
  &lt;span class="neon"&gt;
       &lt;span class="text" data-text="MY LOGO"&gt;My LOGO&lt;/span&gt;
       &lt;span class="gradient"&gt;&lt;/span&gt;
       &lt;span class="spotlight"&gt;&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>The after pseudo-element doesn't line up with the text after another locale has been implemented. So when I choose Chinese the text is off by a few pixels and the lettering is blurry so I think that the text is being affected by the locale for that font how do I work around it.</p>