Question

我有一种情况试图在<header>中实现，这是一个使用字距调整技术，桌面跨浏览器兼容的logotext。

从安德鲁先生这个简单但非常方便的tool开始（特别感谢），我找到了解决方案。

在修改之前，我在<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 -->
...

css 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 m中，但我在Chrome控制台中没有任何错误，但是：

作为编码内容的菜鸟，这是一种用于跨浏览器支持的良好字距调整技术，还是有其他替代方法可以直接/短途应用Media Query或其他条件？谢谢，

Answer 1

有一个CSS font-kerning属性。无需将徽标文本分隔为每个字母的元素。

如果您需要自定义字距调整，则可以将所有字母span设为position: relative并使用CSS向左或向右移动。

跨浏览器字距调整正确的技术

1 个答案: