Làm cách nào để sử dụng các biến thể phông chữ "hai tông màu" trong CSS?

Question

Một số phông chữ có một biến thể cho đường viền và được lấp đầy, và nếu bạn sử dụng chúng trên văn bản chồng chéo, nó sẽ vẽ nét vẽ phác thảo hoặc tô bóng trên văn bản được lấp đầy. Điều này khác với chỉ một đường viền làm nét văn bản như -webkit-text-stroke-color sẽ cung cấp cho bạn, vì đôi khi phông chữ được lấp đầy chứa các phần tô bóng hoặc các chi tiết khác.

Dưới đây là một số ví dụ về phông chữ được thiết kế để sử dụng theo cách này.

http://www.myfonts.com/fonts/matchandkerosene/duotone/

http://www.myfonts.com/fonts/scrowleyfonts/stomp/

tôi là loại có thể được điều này để làm việc sử dụng CSS như thế này:

http://jsfiddle.net/6SakC/2/

Điều này tạo ra hai nhịp H1 và sử dụng lợi nhuận trên xuống di chuyển phác thảo một trên đỉnh.

Tuy nhiên, điều này dường như không lý tưởng đối với tôi. Hai vấn đề:

• Tôi không muốn sao chép văn bản trong html.
• Tôi phải đánh giá cao lề trên bằng thử và sai.
• Nếu văn bản kết thúc tốt đẹp, tính năng này không hoạt động nữa.

Có cách nào tốt hơn để thực hiện việc này không? Tôi có thể sống với việc phải sao chép văn bản, nhưng tôi thực sự muốn một cách tự động hơn để thực hiện việc định vị.

Cảm ơn!

Answer 1

Bạn có thể đặt văn bản phác thảo bên trong h1 và sử dụng định vị tuyệt đối thay vì ước tính lợi nhuận, như trong jsFiddle này: http://jsfiddle.net/6SakC/4/

Đó cũng giải quyết vấn đề với các gói văn bản.

Để tránh trùng lặp văn bản trong đánh dấu, bạn có thể sử dụng JavaScript để tạo văn bản trùng lặp, như trong jsFiddle: http://jsfiddle.net/6SakC/5/ (Đây có thể không phải là ý tưởng tốt nhất, vì văn bản có thể mất một chút thời gian để hiển thị mà không cần đường viền và JS đôi khi bị tắt trong cài đặt trình duyệt.)