Có thể chỉ định trọng lượng đường cho "văn bản-trang trí: dòng thông qua;" trong CSS?

Question

Trọng số mặc định là 1px đối với thuộc tính dòng trong CSS là rất tốt cho bản sao nội dung tại 1em.

Thật không may cho các mục lớn hơn như giá được đặt ở 3em trên trang web phiếu mua hàng, 1px thực sự quá nhẹ. Có thể đặt trọng lượng đường nặng hơn cho đường truyền không?

Nếu không, tôi nên cân nhắc lựa chọn thay thế nào, chẳng hạn như lớp phủ hình ảnh?

Answer 1

Tôi nghĩ rằng đây là sự cố triển khai trình duyệt.

Xem trang này http://jsbin.com/arucu5/2/edit

Trong IE8 và Firefox dòng thông qua tăng chiều rộng với kích thước phông chữ. Tuy nhiên trong Safari và Chrome nó vẫn ở 1px

Bạn có thể luôn luôn là một phương pháp Ghetto bẩn như thế này http://www.overclock.net/web-coding/167926-ghetto-css-strike-through.html

Answer 2

Dưới đây là một cách khác để làm điều đó với một giả đình công qua (trông tuyệt vời và hoạt động trên tất cả các trình duyệt , mặc dù với chi phí của một tưởng tượng nhỏ). Hình ảnh là hộp màu đen 1px x 2px.

del { 
    background: url(/images/black-1x2.png) repeat-x 0 10px; 
} 

Answer 3

này nên làm việc:

<style> 
span.strike { 
     font-weight:bold; /*set line weight here*/ 
     color:red; 
     text-decoration:line-through; 
} 

span.strike>span { 
     font-weight:normal; 
     color: black; 
} 
</style> 

<span class="strike"><span>$20.00</span></span> 

Answer 4

Bạn có thể làm một cái gì đó như thế này trong các trình duyệt hiện đại

.strike{ 
    position: relative; 
} 

.strike::after{ 
    content: ''; 
    border-bottom: 4px solid red; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    width: 100%; 
} 


I <span class="strike">love</span> hate hotdogs 

Made một fiddle của nó quá: http://jsfiddle.net/TFSBF/

Answer 5

tôi đã tìm thấy cách tiếp cận khác để thiết lập trọng lượng dòng cho văn bản multiline:

span { 
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII='); 
    background-repeat: repeat-x; 
    background-position: center; 
} 

Dưới đây là một ví dụ: http://output.jsbin.com/weqovenopi/1/

Cách tiếp cận này đảm nhận việc lặp đi lặp lại một hình ảnh (chiều rộng và chiều cao 1px npx). Ngoài ra nó hoạt động độc lập với kích thước phông chữ.

Chỉ có một bất lợi - nền hiển thị dưới văn bản.