跨浏览器字距调整正确技术
Posted
技术标签:
【中文标题】跨浏览器字距调整正确技术【英文标题】：Cross browser kerning properly technique 【发布时间】：2015-08-27 14:50:33 【问题描述】：我有一种情况试图在<header> 中实现，这是一个使用字距调整技术的徽标文本，兼容桌面跨浏览器。
从Mr.Andrew 制作的这个简单但非常方便的tool 开始（特别感谢），我找到了解决方案。
在修改之前，我在header.php中有这个<header>部分：
...
<!-- 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 -->
...
csscode:
...
.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 或其他条件？谢谢，
【问题讨论】：
【参考方案1】：有一个 CSS font-kerning 属性。无需将您的徽标文本分成每个字母的元素。
如果您需要自定义字距调整，您可以将所有字母 spans 设置为 position: relative，并使用 CSS 向左或向右移动它们。
【讨论】：
谢谢，但在我找到Media Query 解决方案之前，我尝试过使用font-kerning，但没有得到很好的结果。auto 将应用字距调整，但不是负数（如我有）到所有元素和关于normal 设置，我没有找到任何示例可以告诉我如何在字母之间应用自定义字距调整值，包括负值。不仅如此，还有关于cross browser compatibility还有一些保留
它可能像 Lettering.js 或 typejs.org 一样是另一个有用的工具，但老实说，wordpress 中的js 实现对每个人（包括我）来说都不是那么舒服，这就是为什么我更喜欢旧的学校但安全的技术，以便查看和感受所应用的代码。我认为这最终不是一条捷径:)
由于您已经为每个字母设置了跨度，请尝试将它们设置为 position: relative，然后向左或向右移动它们。
我对这种形状的代码并不感到不舒服，我发现here 我可以使用单个@media query 来减少一些行。我的问题是是否有一种简短的方法可以做到这一点:) 如果我能看到你的代码示例，如果你认为它可以是一个快捷的解决方案，那就太好了。谢谢，
WebKit 和 Gecko 以不同的方式呈现字体。我在 Firefox 中检查了您的页面，字母的尺寸都完美无缺。在 Chrome 中，字母尺寸的测量值为半像素，等等。没有更简单的方法可以让它们在我所知道的跨浏览器上看起来一样。以上是关于跨浏览器字距调整正确技术的主要内容，如果未能解决你的问题，请参考以下文章