Перекрестный браузер Кернинг надлежащей техники

Question

У меня есть ситуация, пытающаяся внедрить в <header>, логотекст с использованием технологии кернинга, совместимый с обоими кросс-браузерами.

Начиная с этого простого, но очень удобного tool от Mr.Andrew (особая благодарность), я нашел решение.

До модификации, у меня был этот <header> раздел header.php:

... 
     <!-- Start Header --> 

     <header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner"> 

      <div class="small-7 medium-4 columns logo<?php if ($header_style == 'style1') { ?> show-for-large-up<?php } ?>"> 

       <?php if ($header_style == 'style2') { ?> 

        <a class="logotext" href="<?php echo esc_url(home_url('/')); ?>" 

        title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" 

        rel="home"><?php bloginfo('name'); ?> 

        </a> 

       <?php } ?> 

      </div> 

      <?php if ($header_style != 'style2') { ?> 

      <div class="small-7 medium-4 columns logo"> 

       <?php if ($header_style == 'style1') { ?> 

        <a class="logotext" href="<?php echo esc_url(home_url('/')); ?>" 

        title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" 

        rel="home"><?php bloginfo('name'); ?> 

        </a> 

       <?php } ?> 

      </div> 

      <?php } ?> 

      <div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder"> 

       <?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?> 

       <?php if ($full_menu_true) { ?> 

        <nav id="full-menu" role="navigation"> 

         <?php if ($page_menu) { ?> 

          <?php wp_nav_menu(array('menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown )); ?> 

         <?php } else if(has_nav_menu('nav-menu')) { ?> 

          <?php wp_nav_menu(array('theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown)); ?> 

         <?php } else { ?> 

          <ul class="full-menu"> 

           <li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">Please assign a menu from Appearance -> Menus</a></li> 

          </ul> 

         <?php } ?> 

        </nav> 

       <?php } ?> 

       <?php if ($header_search != 'off') { do_action('thb_quick_search'); } ?> 

       <?php if ($header_cart != 'off') { do_action('thb_quick_cart'); } ?> 

       <a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>"> 

        <div> 

         <span></span><span></span><span></span> 

        </div> 

       </a> 

      </div> 

     </header> 

     <!-- End Header --> 
... 

После:

... 
     <!-- Start Header --> 
    <header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner">       
     <div class="row max_width "> 
      <div class="small-7 medium-4 columns logo<?php if ($header_style == 'style1') { ?> show-for-large-up<?php } ?>"> 
       <?php if ($header_style == 'style2') { ?> 
        <div class="small-7 medium-4 columns logo"> 
         <span class="logotext-n">n</span> 
         <span class="logotext-e">e</span> 
         <span class="logotext-u">u</span> 
         <span class="logotext-e2">e</span> 
         <span class="logotext-g">g</span> 
         <span class="logotext-r">r</span> 
         <span class="logotext-i">i</span> 
         <span class="logotext-d">d</span> 
        </div> 
       <?php } ?> 
      </div>   
     </div>    
       <?php if ($header_style != 'style2') { ?>      
     <div class="row max_width ">    
      <div class="small-7 medium-4 columns logo"> 
       <?php if ($header_style == 'style1') { ?> 
        <div class="small-7 medium-4 columns logo"> 
         <span class="logotext-n">n</span> 
         <span class="logotext-e">e</span> 
         <span class="logotext-u">u</span> 
         <span class="logotext-e2">e</span> 
         <span class="logotext-g">g</span> 
         <span class="logotext-r">r</span> 
         <span class="logotext-i">i</span> 
         <span class="logotext-d">d</span> 
        </div> 
       <?php } ?> 
      </div>   
     </div> 
    <?php } ?>      
     <div class="row max_width ">   
      <div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder"> 
       <?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?> 
       <?php if ($full_menu_true) { ?> 
        <nav id="full-menu" role="navigation"> 
         <?php if ($page_menu) { ?> 
          <?php wp_nav_menu(array('menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown )); ?> 
         <?php } else if(has_nav_menu('nav-menu')) { ?> 
          <?php wp_nav_menu(array('theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown)); ?> 
         <?php } else { ?> 
          <ul class="full-menu"> 
           <li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">Please assign a menu from Appearance -> Menus</a></li> 
          </ul> 
         <?php } ?> 
        </nav> 
       <?php } ?> 
       <?php if ($header_search != 'off') { do_action('thb_quick_search'); } ?> 
       <?php if ($header_cart != 'off') { do_action('thb_quick_cart'); } ?> 
       <a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>"> 
        <div> 
         <span></span><span></span><span></span> 
        </div> 
       </a> 
      </div>   
     </div> 
    </header> 
    <!-- End Header --> 
... 

устанавливаемых сотовые code:

... 
.logotext-n { 
    color: #f1ecd6;  
    font-family: "arial black", sans-serif; 
    font-weight: 900; 
    font-size: 210px; 
    text-transform: lowercase; 
    letter-spacing: -29px; 
} 

. 
. 
. 

.logotext-d { 
    color: #f1ecd6;  
    font-family: "arial black", sans-serif; 
    font-weight: 900; 
    font-size: 210px; 
    text-transform: lowercase; 
    letter-spacing: 0; 
} 
... 

В этот момент я нашел что значения кернинга выглядят по-разному в IE/Firefox против Chrome. Я читал о Media Query, и я попытался это для Chrome значения коррекции дисплея:

... 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .logotext-n { 
     color: #f1ecd6;  
     font-family: "arial black", sans-serif; 
     font-weight: 900; 
     font-size: 210px; 
     text-transform: lowercase; 
     letter-spacing: -18px; 
      } 
} 
    . 
    . 
    . 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .logotext-d { 
     color: #f1ecd6;  
     font-family: "arial black", sans-serif; 
     font-weight: 900; 
     font-size: 210px; 
     text-transform: lowercase; 
     letter-spacing: 0; 
      } 
} 
... 

The result выглядит, как он должен в любом браузере IE11/Firefox38.0.5/Chrome43.0.2357.124 м, также я не имеют любую ошибку в консоли Chrome, тем не менее:

Будучи нобелем в кодировании, это хорошая технология кернинга для поддержки кросс-браузера или есть ли другая альтернатива для применения Media Query или других условий в прямой/? Спасибо,

Answer 1

Существует свойство CSS font-kerning. Не нужно отделять ваш логотип-текст от элемента для каждой буквы.

Если вам нужен пользовательский кернинг, вы можете сделать все свое письмо span с помощью position: relative и использовать CSS для перемещения их влево или вправо.