2015-10-02 17 views
52

Tôi đang tìm Unicode cho các ký tự đặc biệt từ FileFormat.Info's search.Làm cách nào để ngăn các ký tự Unicode hiển thị dưới dạng biểu tượng cảm xúc trong HTML từ JavaScript?

Một số ký tự được hiển thị dưới dạng màu xám đen trắng cổ điển, chẳng hạn như ⚠ (dấu hiệu cảnh báo, \u26A0 hoặc ⚠). Đây là những điều thích hợp hơn, vì tôi có thể áp dụng các kiểu CSS (chẳng hạn như màu) cho chúng.

image of warning glyph

Những người khác đang render như biểu tượng cảm xúc hoạt hình mới hơn, chẳng hạn như ⌛ (đồng hồ cát, \u231B hoặc ⌛). Đây không phải là thích hợp hơn, vì tôi không thể phong cách đầy đủ chúng.

image of hourglass emoji

Dường như trình duyệt đang thực hiện thay đổi này, kể từ khi tôi có thể nhìn thấy những hình tượng đồng hồ cát trên Mac Firefox, chỉ cần không Mac Chrome hay Mac Safari.

Có cách nào để buộc trình duyệt hiển thị phiên bản cũ hơn (phẳng đơn điệu) để hiển thị không?

Cập nhật: Dường như (từ nhận xét bên dưới) có text presentation selector, FE0E, có sẵn để thi hành text-vs-emoji. Công cụ chọn được nối dưới dạng hậu tố không có dấu cách trên mã của ký tự, chẳng hạn như ⌛&#xFE0E cho HTML hex hoặc \u231B\uFE0E cho JS. Tuy nhiên, nó chỉ đơn giản là không được vinh danh bởi tất cả các trình duyệt (ví dụ như Chrome và Edge).

+0

để bạn thiết lập một font-family trong các quy tắc CSS của bạn? –

+1

Bản sao có thể có của [Biểu tượng/Biểu tượng cảm xúc Unicode không nhất quán] (http://stackoverflow.com/questions/29659949/inconsistent-unicode-emoji-glyphs-symbols) –

+0

@janaspage Từ câu hỏi của bạn, bạn đã biết rõ cú pháp cho Unicode ký tự trong HTML và JS. –

Trả lời

-4

Tôi không biết cách nào để tắt hiển thị loại biểu tượng cảm xúc. Thông thường, tôi sử dụng phông chữ biểu tượng như font awesome hoặc glyphicons (đi kèm với Bootstrap 3).

Lợi ích của việc sử dụng những so với các ký tự unicode là

  1. bạn có thể chọn từ nhiều phong cách khác nhau để nó phù hợp với thiết kế của trang web của bạn;
  2. chúng nhất quán trên các trình duyệt (nếu bạn đã từng thử làm một ký tự sao unicode, bạn sẽ nhận thấy nó khác trong IE so với trình duyệt khác);
  3. cũng vậy, chúng hoàn toàn có thể tạo kiểu, giống như các ký tự unicode bạn đang cố sử dụng.

Nhược điểm duy nhất là một thứ nữa để trình duyệt tải xuống khi họ xem trang của bạn.

45

Nối Unicode variation selector ký tự để buộc văn bản, VS15, ︎.
Điều này buộc ký tự trước được hiển thị dưới dạng văn bản thay vì biểu tượng cảm xúc.

<p>&#xFE0E;</p> 

Kết quả: & # xFE0E;

Tìm hiểu thêm tại: Unicode symbol as text or emoji

+0

Điều này là cực kỳ hữu ích, đó là lý do tại sao tôi đã upvoted nó vào ngày khác. Tôi tự hỏi làm thế nào tôi có thể dán một biểu tượng cảm xúc * và * nhân vật vô hình này vào một quảng cáo Facebook mà tôi đang viết? P.S. Điều này cũng thú vị: http://apple.stackexchange.com/a/240450/53510 – Ryan

+2

Tôi chỉ nhận ra rằng mẹo '& # xFE0E; 'này không hoạt động đối với tôi đối với một số phông chữ nhất định. Tôi đang gặp khó khăn khi tìm một phông chữ mà tôi có thể mong đợi hợp lý để cài đặt trên tất cả các máy (Windows, iOS, Mac, Android, v.v.). – Ryan

+0

Điều này hữu ích: '@ font-face { font-family:" EmojiSymbols "; định dạng src: url ('/ fonts/EmojiSymbols-Regular.woff') ('woff'); trang trí văn bản: không có; kiểu phông chữ: bình thường; } 'http://emojisymbols.com/beforeuse.php – Ryan

3

Tôi đã có một ký tự Unicode như span::before nội dung. Chrome đã sử dụng "Segoe UI Emoji" làm phông chữ để hiển thị nó. Ngay cả khi tôi đặt họ phông chữ thành "Biểu tượng giao diện người dùng Segoe", nó không hoạt động.

Nhưng, khi tôi đặt font-family để "Segoe UI Symbol" một cách rõ ràng cho span::before, chứ không phải chỉ dành riêng cho các span, sau đó nó làm việc.

0

Đối với tôi trên OSX giải pháp là để thiết lập font-family để EmojiSymbols

0

Không ai trong số các giải pháp trên làm việc cho "Emoji cho Google Chrome" Extension.

Vì vậy, tôi đã thực hiện một ảnh chụp màn hình của nhân vật Unicode 'LÁ PHIẾU BOX WITH CHECK' (U + 2611) và thêm nó như là hình ảnh với php:

$ballotBoxWithCheck='<img src="pics/U2611.png" style="height:11px;margin-bottom:-1px">'; # &#9745; or /U2611 

enter image description here

Xem: https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel

1

Phông chữ Android không phong phú như bạn mong đợi. Các tệp phông chữ không có các hình tượng kỳ lạ này và Android có khả năng hack cho một vài ký tự không có glyph. Chúng được thay thế bằng các biểu tượng.

Vì vậy, giải pháp là tích hợp trang web với phông chữ web (woff). Tạo tệp phông chữ mới với FontForge và chọn glyph bắt buộc từ serif TTF miễn phí chẳng hạn. Mỗi glyph mất 1k. Tạo tệp woff.

Chuẩn bị CSS đơn giản để nhập họ phông chữ tùy chỉnh.

style.css:

@font-face { 
    font-family: 'Exotic Icons'; 
    src: url('exotic-icons.woff') format('woff'); 
} 

.exotic-symbol-font { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font-family: 'Exotic Icons'; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 

    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

index.html file:

<html> 
    <head> 
    <meta charset="utf-8"> 
    <link href="style.css" rel="stylesheet"></head> 
    <title>Test custom glyphs</title> 
    </head> 
    <body> 
    <table> 
     <tr> 
     <td class="exotic-symbol-font"> 
      ☠ &#x2660; a g 
     </td>  
     </tr> 
    </table> 
    </body> 
</html> 
Các vấn đề liên quan