Có thể hiển thị một ký tự thay thế bằng CSS không?

Question

Tôi đang sử dụng phông chữ web có nhiều chữ khác nhau, "M" để chọn trong bảng điều khiển hình chữ nhật. Mặc định "M" tiếp tục được hiển thị trong trang web của tôi rất ghê gớm. Tôi muốn sử dụng chữ "M" tốt hơn từ một trong các lựa chọn ký tự thay thế của phông chữ.

Trong bảng điều khiển glyphs (trong Illustrator) nhân vật "M" Tôi muốn sử dụng là: U + 004d phụ khuyết # 2 (aalt2)

Tôi có này hiện đang trong CSS của tôi:

.script:before { 
content: "\004D"; 
} 

Thật không may, mã này không kéo "M" thay thế mà tôi muốn. Nó chỉ kéo "M" mặc định mà tôi đang cố gắng loại bỏ.

Thậm chí có thể gọi chữ "M" thay thế từ phông chữ và hiển thị nó trên trang web không?

Answer 1

Ok mã html tương ứng với ký tự unicode phông chữ của 004D là "M". Vì bạn muốn thay đổi tất cả các lần xuất hiện của specifiv "M" thành ký tự cụ thể đó, chỉ cần tìm các lần xuất hiện của ký tự đó và thêm một thẻ span khi đang di chuyển.

Đây là ví dụ tôi đã thực hiện tương tự với ký tự "e" chứ không phải "E". Tôi đã thay đổi "e" bằng "ȝ"

JSFIDDLE LINK tại đây.

$(document).ready(function() { 
 
    $.fn.texter = function() { 
 
    var letters = $(this).html().split(""), 
 
     text = ""; 
 

 
    for (var i in letters) { 
 
     if (letters[i] == "e") { 
 
     text += "<span class='" + letters[i] + "'>" + '&#541;' + "</span>"; 
 
     } else { 
 
     text += letters[i]; 
 
     } 
 
    } 
 
    $(this).html(text); 
 
    }; 
 

 
    $("body").texter(); 
 
});

.e { 
 
    color: magenta; 
 
    font-family: 'Arial'; 
 
    font-size: 18px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="text">Test Message is Entered Here EEE is not touched but eee is changed</div>

biến thể khác là sử dụng các "unicode tầm" thuộc tính trong @ font-face để xác định một font mới và áp dụng mà font mới vào mỗi sự xuất hiện của nhân vật. Tham khảo MDN Documentation here.

Các Fiddle cho điều này có thể được tìm thấy ở đây ::: http://jsfiddle.net/dka30drt/7/

đoạn mã vào đây để sự thay đổi thứ 2,

$(document).ready(function() { 
 
    $.fn.texter = function() { 
 
    var letters = $(this).html().split(""), 
 
     text = ""; 
 

 
    for (var i in letters) { 
 
     if (letters[i] == "e") { 
 
     text += "<span class='" + letters[i] + "'>" + '&#541;' + "</span>"; 
 
     console.log(letters[i]); 
 
     } else { 
 
     text += letters[i]; 
 
     /*console.log(letters[i]);*/ 
 
     } 
 
    } 
 
    $(this).html(text); 
 
    }; 
 

 
    $("body").texter(); 
 
});

@font-face { 
 
    font-family: funkyfont; 
 
    src: url(https://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/webfontkit/alegreyasc-italic-webfont.eot?#iefix) format('embedded-opentype'), url(https://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/webfontkit/alegreyasc-italic-webfont.woff) format('woff'), url(https://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/webfontkit/alegreyasc-italic-webfont.ttf) format('truetype'), url(https://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/webfontkit/alegreyasc-italic-webfont.svg#svgFontName) format('svg'); 
 
    unicode-range: U+004D; 
 
} 
 
.e { 
 
    color: magenta; 
 
    font-family: 'funkyfont'; 
 
    font-size: 18px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="text">Test Message is Entered Here EEE is not touched but eee is changed</div>

Hope this helps

Answer 2

tôi loại đã tìm ra nó. Điều này làm việc trong FF, nhưng không phải là Safari.

Đây là HTML cho "M" trong từ 'Gặp gỡ', mà tôi muốn thay đổi:

<span class="m-alternate">M</span>eet 

Đây là CSS làm thay đổi lá thư đặc biệt đối với tôi:

.m-alternate { 
font-feature-settings: "ss02"; 
} 

Pro Mẹo:Nếu bạn đang tạo ra một phông chữ web, chắc chắn rằng các khuyết đang thực sự ở chỗ phông chữ web. Tôi đã có một phiên bản của phông chữ mà không có xen kẽ, do đó tại sao mã darn không hoạt động!