Question

我正在尝试使用-webkit-text-stroke在文本上创建轮廓。在Safari中似乎可以正常工作。但是，当我在chrome中查看时，它会用多行显示字体。它不能执行此操作的唯一方法是，如果我使用.eot字体，但是它的支持不是很好。我尝试了所有其他字体woff woff2 otf tff。

反正有解决此问题的方法吗？或者，可能是什么问题？

这是CSS：

@font-face {
    font-family: 'Platform-Medium';
    src: url(../assets/Platform-Medium.otf);
    font-weight: 500;
}


body{
    font-family: 'Apercu', Helvetica, sans-serif;
    line-height: 2;
    /* here we smoothed the text a touch */
    -webkit-font-smoothing: antialiased;
}

.platform-medium {
    font-family: 'Platform-Medium';
}


.f7 {
    font-size: 13rem;
    letter-spacing: .05em;
}

.light{
    color:#E8EFEE;
}

.text-outline{
    color: transparent;
    -webkit-text-stroke-color: #E8EFEE;
    -webkit-text-stroke-width: 2px;
}

我还应该提到我正在使用Tachyons。

<section class="hero min-vh-100 cover bg-center flex items-center justify-center" style="<?php if( get_field('hero_image') ):?> 
	background-image: url(<?php the_field('hero_image'); ?>;<?php endif; ?>">
		
		<div class="hero-content flex items-center justify-center w-100">

			<!-- If no image is added to the 'subhead' 
			custom field then the title of the post will be chown -->
			<?php if( get_field( 'Subhead' ) ): ?>
				<img class="subhead w-75" src="<?php the_field('Subhead'); ?>" />
               <?php else: ?>
               <h1 class="light platform-medium f7 ma0 text-outline ttu tc"><?php the_title();?></h1>
               <?php endif; ?>    

		</div>

	</section>

这是结果：enter image description here

-webkit-text-stroke镀铬多行

0 个答案: