Css 跨浏览器核处理技术
我遇到了一种情况,试图在Css 跨浏览器核处理技术,css,wordpress,cross-browser,media-queries,kerning,Css,Wordpress,Cross Browser,Media Queries,Kerning,我遇到了一种情况,试图在中实现,一种使用紧排技术的logotext,桌面跨浏览器兼容 从安德鲁先生提出的这个简单但非常方便的问题开始(特别感谢),我找到了一个解决办法 在修改之前,我在header.php中有这个部分: ... <!-- Start Header --> <header class="header row no-padding <?php echo $header_style; ?>" data-equal=">
中实现,一种使用紧排技术的logotext,桌面跨浏览器兼容
从安德鲁先生提出的这个简单但非常方便的问题开始(特别感谢),我找到了一个解决办法
在修改之前,我在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 -->
...
在这一点上,我发现IE/Firefox和Chrome的内核值看起来不同。我已经阅读了媒体查询
的相关内容,并尝试了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;
}
}
...
在每个浏览器IE11/Firefox38.0.5/Chrome43.0.2357.124 m中看起来都应该如此,而且我在Chrome控制台中没有任何错误,不过:
作为编码方面的新手,这是一种很好的跨浏览器支持紧排技术,还是有其他方法可以直接/短时间应用
媒体查询
或其他条件?谢谢,有一个CSS字体紧排属性。无需为每个字母将徽标文本分离为一个元素
如果您需要自定义字距,您可以将所有字母span
s设置为position:relative
,并使用CSS将其向左或向右移动。谢谢,但在找到Media Query
解决方案之前,我尝试过使用字距调整,但效果不理想。auto
将应用字距调整,但不会产生负面效果(就我的情况而言)对于所有的元素和关于normal
设置,我没有找到任何例子可以告诉我如何在字母之间应用自定义紧排值,包括负值。除此之外,对于它可能是什么,还有一些保留,比如letting.js或typejs.org另一个有用的工具,但老实说,js
wordpress中的实现对每个人(包括我)来说都不太方便,这就是为什么我更喜欢一种老派但安全的技术,以便看到并感受代码的应用。我认为这不是一个简单的方法:)因为每个字母都有一个跨度,尝试将它们定位:相对,然后向左或向右移动。我对这种形状的代码并不感到不舒服,我发现我可以使用一个@media query
,它将删除一些行。我的问题是,是否有一个简单的方法可以做到这一点:)如果您认为这是一个快捷的解决方案,如果我能看到您的代码示例,那就太好了。谢谢,WebKit和Gecko呈现字体的方式不同。我在Firefox中查看了你的页面,字母的尺寸都是像素级的。在Chrome中,字母尺寸的测量值为半个像素,诸如此类。据我所知,要让它们在跨浏览器上看起来一样,没有比这更简单的方法了。
...
.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;
}
...
...
@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;
}
}
...