Vấn đề xếp chồng Phông chữ tuyệt vời trong safari

Question

Tôi đang gặp sự cố lạ này với các biểu tượng phông chữ tuyệt vời của mình. Tôi muốn các biểu tượng của tôi có viền tròn. Tôi không muốn sử dụng border: 1px solid vì đường viền biểu tượng sẽ bị mờ. Tôi đã đạt được đường viền trơn tru này bằng "stacking method" của phông chữ tuyệt vời như được mô tả here

Vì phông chữ của tôi lớn 64px, biên giới biểu tượng này quá dày. Để tránh điều đó, tôi đã sử dụng box-shadow.

Vấn đề của tôi là đường viền biểu tượng của tôi không đồng nhất.

Trong chrome, biên giới là một chút dày ở phía bên trái. (Bằng cách nào đó tôi không thể tái tạo vấn đề này trong fiddle/đoạn như vậy mà có thể được bỏ qua.)

nhưng trong safari , đường viền dày ở bên phải.

Làm thế nào để thoát khỏi vấn đề này? Tôi không muốn sử dụng -webkit-text-stroke vì nó có hỗ trợ trình duyệt bị giới hạn. Bất kỳ giúp đỡ được nhiều đánh giá cao :)

FIDDLE

Đây là mã của tôi.

a{ 
 
    text-decoration: none; 
 
} 
 
.social-block .fa { 
 
    font-size: 64px; 
 
} 
 

 
span.fa-stack { 
 
    width: 64px; 
 
    height: 64px; 
 
} 
 

 
.social-block .fa-stack-1x:before { 
 
    font-size: 24px; 
 
    vertical-align: top; 
 
    line-height: 64px; 
 
} 
 
.social-block .fa-stack-1x{ 
 
    box-shadow: inset 0 0 0px 7px #fff; 
 
    position: absolute; 
 
    top: -1px; 
 
} 
 
.social-block a:hover .fa-stack-1x{ 
 
    box-shadow: none; 
 
} 
 
.social-block a:hover .fa-stack-1x:before { 
 
    width: 50px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    left: 7px; 
 
    top: 7px; 
 
    position: absolute; 
 
} 
 

 
.social-block .fa { 
 
    color: #CC1E4A; 
 
    border-radius: 50%; 
 
    -webkit-transition: all ease .25s; 
 
    -moz-transition: all ease .25s; 
 
    -o-transition: all ease .25s; 
 
    transition: all ease .25s; 
 
    font-size: 64px; 
 
} 
 

 
.social-block a:hover .fa-circle-thin { 
 
    background: none; 
 
} 
 
.social-block a:hover .fa-stack-1x:before { 
 
    background: #CC1E4A; 
 
    display: block; 
 
    border-radius: 50%; 
 
} 
 
.social-block a:hover .fa-stack-1x { 
 
    color: #fff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="social-block"> 
 
    <a href="#"> 
 
     <span class="fa-stack fa-lg"> 
 
     <i class="fa fa-circle-thin fa-stack-2x"></i> 
 
     <i class="fa fa-facebook fa-stack-1x"></i> 
 
    </span> 
 
    </a> 
 
    <a href="#"> 
 
     <span class="fa-stack fa-lg"> 
 
     <i class="fa fa-circle-thin fa-stack-2x"></i> 
 
     <i class="fa fa-twitter fa-stack-1x"></i> 
 
    </span> 
 
    </a> 
 
    <a href="#"> 
 
     <span class="fa-stack fa-lg"> 
 
     <i class="fa fa-circle-thin fa-stack-2x"></i> 
 
     <i class="fa fa-linkedin fa-stack-1x"></i> 
 
    </span> 
 
    </a> 
 
</div>

Answer 1

Bạn không thể thay đổi trọng lượng của phông chữ hiện tại Các biểu tượng tuyệt vời, tuy nhiên nhà thiết kế cũng tạo ra một bộ thương mại các phông chữ biểu tượng đa trọng lượng được gọi là Black Tie, bao gồm ánh sáng phông chữ.

Là một giải pháp thay vì biểu tượng xếp chồng, tôi khuyên bạn chỉ nên sử dụng các biểu tượng bình thường và vẽ vòng tròn với border-radius. Hãy đơn giản và dễ cập nhật.

Jsfiddle Example

.social-block a { 
 
    position: relative; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    margin: 10px; 
 
    color: #cc1e4a; 
 
    background-color: #fff; 
 
    border: 1px solid #cc1e4a; 
 
    border-radius: 50%; 
 
    box-sizing: border-box; 
 
    width: 50px; 
 
    height: 50px; 
 
    text-align: center; 
 
    transition: all .25s ease; 
 
    transition-property: color, box-shadow; 
 
} 
 
.social-block a:hover { 
 
    box-shadow: 0 0 0 3px #cc1e4a; 
 
    background-color: #cc1e4a; 
 
    color: #fff; 
 
} 
 
.social-block .fa { 
 
    font-size: 24px; 
 
    height: 100%; 
 
} 
 
/* center icon vertically */ 
 
.social-block .fa:after { 
 
    content: ""; 
 
    height: 100%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
/* box-shadow white line fixes */ 
 
.social-block a:hover:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: -3px; right: -3px; 
 
    top: -3px; bottom: -3px; 
 
    border-radius: 50%; 
 
    border: 6px solid #cc1e4a; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="social-block"> 
 
    <a href="#"><i class="fa fa-facebook"></i></a> 
 
    <a href="#"><i class="fa fa-twitter"></i></a> 
 
    <a href="#"><i class="fa fa-linkedin"></i></a> 
 
</div>

Answer 2

Thêm z-index:-1;-.social-block .fa-stack-1x lớp.

.social-block .fa-stack-1x { 
    box-shadow: inset 0 0 0px 7px #fff; 
    z-index:-1; // Add this 
    position: absolute; 
    top: -1px; 
} 

ví dụ: https://jsfiddle.net/hwpobc93/14/

-------

Cập nhật:

Vòng tròn có độ dày mà phông chữ applys tuyệt vời theo mặc định:

Nếu bạn muốn có nhiều quyền kiểm soát hơn, bạn phải thay đổi một chút css:

• Tháo gỡ biểu tượng biên giới <i class="fa fa-circle-thin fa-stack-2x"></i>
• Thêm một trước để tạo ra biên giới

New dụ:

https://jsfiddle.net/hwpobc93/18/