유니 코드 문자가 JavaScript의 HTML에서 이모티콘으로 렌더링되는 것을 방지하는 방법은 무엇입니까?

FileFormat.Info의 검색 에서 특수 문자에 대한 유니 코드를 찾고 있습니다.

일부 문자는 ⚠ (경고 기호 \u26A0또는 ⚠) 와 같은 고전적인 흑백 글리프로 렌더링됩니다 . CSS 스타일 (예 : 색상)을 적용 할 수 있기 때문에 선호됩니다.

다른 사람들은 ⌛ (모래 시계 \u231B또는 ⌛) 와 같은 최신 만화 이모티콘으로 렌더링 합니다. 나는 그것들을 완전히 스타일링 할 수 없기 때문에 바람직하지 않습니다.

Mac Chrome이나 Mac Safari가 아닌 Mac Firefox에서 모래 시계 문자를 볼 수 있기 때문에 브라우저가 이러한 변경을 수행하는 것 같습니다.

브라우저가 이전 버전 (단색)을 표시하도록 강제하는 방법이 있습니까?

업데이트 : 그것은 (아래 설명에서) 보이는이 텍스트 프리젠 테이션 선택기 , FE0E, 사용할 수있는 텍스트 - 대 - 이모티콘을 적용합니다. 선택자는 ⌛︎HTML 16 진수 또는 \u231B\uFE0EJS 와 같이 문자 코드에 공백없이 접미사로 연결됩니다 . 그러나 모든 브라우저 (예 : Chrome 및 Edge) 에서 이를 인정하지는 않습니다 .

추가] 유니 코드 변화 선택 , 텍스트, VS15을 강제하기위한 문자 ︎.
이렇게하면 이전 문자가 이모티콘 기호가 아닌 텍스트로 렌더링됩니다.

<p>🔒&#xFE0E;</p>

결과 : 🔒︎

자세히 알아보기 : 유니 코드 기호 (텍스트 또는 그림 이모티콘)

나는에서 유니 코드 문자했다 content의를 span::before하고, 나는 있었다 font-family의 span"Segoe UI 기호"로 설정합니다. 하지만 크롬은 "Segoe UI Emoji"를 글꼴로 사용하여 렌더링했습니다.

내가 설정 그러나, font-family"Segoe UI 기호"로 명시 적으로 에 대한 span::before것이 아니라 단지보다위한 span, 그것은했다.

iOS에서 이모티콘을 표시하지 않도록하는 CSS 전용 솔루션의 font-family: monospace경우 이모티콘 변형이 아닌 글리프의 텍스트 변형을 기본값으로 사용할 수 있습니다 .

Android 글꼴은 예상대로 풍부하지 않습니다. 글꼴 파일에는 이러한 이국적인 글리프가 없으며 Android에는 글리프가없는 몇 가지 문자에 대한 해킹이 있습니다. 아이콘으로 대체됩니다.

따라서 해결책은 사이트를 웹 글꼴 (woff)과 통합하는 것입니다. FontForge로 새 글꼴 파일을 만들고 예를 들어 무료 serif TTF에서 필요한 글리프를 선택하십시오. 모든 글리프에는 1k가 필요합니다. woff 파일을 생성합니다.

사용자 정의 글꼴 패밀리를 가져 오기 위해 간단한 CSS를 준비하십시오.

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 파일 :

<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>

이모지가 텍스트에서 너무 눈에 띄지 않도록 단색 디스플레이를 강제하는 것이 주요 관심사라면 CSS 필터를 단독으로 또는 유니 코드 변형 선택기와 함께 사용하는 것이 좋습니다.

p.gscale { 
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
a {
  color: #999;
  -webkit-filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
   filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
}

<p class="gscale">You've now got emoji display on 🔒lockdown🔒.</p>

<p>External Link: <a href="https://knowyourmeme.com/memes/party-hard">celebrate 🎉</a></p>

변형 선택기와 달리 CSS 필터가 모든 것에 적용되기 때문에 이모티콘이 어떻게 렌더링되는지는 중요하지 않습니다. (나는이 아이콘을 사용하여 Wayback Machine을 가리 키도록 수정 된 하이퍼 링크의 PNG 형식 "링크 유형"아이콘을 회색조로 표시합니다.)

다만 주의 할 마음 . 자식에서 부모 요소의 필터를 재정의 할 수 없으므로이 기술을 사용하여 단락을 회색조로 표시 한 다음 단락 내의 링크를 다시 색상화할 수 없습니다. 😢

... 그래도 모든 것을 하이퍼 링크로 만들거나 그 안에 풍부한 마크 업을 허용하지 않는 상황에 유용합니다. (예 : 제목 및 설명)

그러나 이것은 CSS가 실제로 적용되지 않는 한 작동하지 않으므로 <title>유니 코드 변형 선택기보다 요소 에서 더 안정적인 두 번째 옵션을 제공 할 것입니다 (GitHub를보고 있습니다. 브라우저 탭) :

사용자가 제공 한 문자열을 <title>요소에 넣는 경우 굵게 / 기울임 꼴 / 밑줄 등과 함께 그림 이모티콘을 필터링합니다. 마크 업. (예, 그것을 놓친 사람들을 위해 표준은 <title>앰퍼샌드 이스케이프와 내가 테스트 한 모든 브라우저에서 모든 태그를 리터럴 텍스트로 해석하는 것을 제외하고 일반 텍스트로 내용을 요구합니다.)

내가 생각할 수있는 두 가지 방법은 다음과 같습니다.

1. 최신 버전의 유니 코드가 이모티콘과 수정자를 넣는 블록과 일치 하는 수동으로 유지 관리되는 정규식 을 직접 사용합니다 .
2. 자소 클러스터를 반복 하고 인식 된 이모 지 코드 포인트를 포함하는 모든 것을 버립니다 . (grapheme 클러스터는 기본 글리프와 모든 분음 부호 및 가시적 문자를 구성하는 기타 수정 자입니다. 링크 된 예제는 Python의 정규식 엔진을 사용하여 토큰 화 한 다음 emoji데이터베이스 용 패키지를 사용하지만 Rust는 언어의 좋은 예입니다. 반복되는 자소 클러스터는 unicode-segmentation.) 와 같은 크레이트를 통해 빠르고 쉽습니다 .)

데스크톱 버전 75 인 Google 크롬은 페이지를로드하는 동안 발생하는 첫 번째 유니 코드 이스케이프를 기반으로 유니 코드 문자를 렌더링하는 방식을 모호하게 만드는 것 같습니다. 예를 들어 페이지 소스에서 첫 번째 HTML 유니 코드 이스케이프로 구문 분석되고 이에 상응하는 이모티콘이없는 경우 & # 9207; 페이지에 이모티콘으로 렌더링되지 않는 이스케이프가 포함되어 있음을 Chrome에 명확히하는 것 같습니다.

ssokolow의 답변을 확장 하면 필터를 사용하는 것이 좋고 최소한 간단한 글꼴을 사용하는 대신 윤곽선을 표시하지만 특정 색상을 사용하려는 경우 RGB 색상을 일련의 CSS 필터로 변환하는 것은 매우 어렵습니다.

더 좋은 옵션은 <feColorMatrix>SVG 필터 를 사용하는 것 입니다. 그레이 스케일 필터 및 데이터 URI 체계와 결합하면 RGB 및 인라인 CSS를 통해 색상을 나타낼 수 있습니다.

.violet {
  color: white;
  filter: grayscale(100%) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='f'><feColorMatrix type='matrix' values='0.78 0 0 0 0  0 0.082 0 0 0  0 0 0.522 0 0  0 0 0 1 0'/></filter></svg>#f");
}

불행히도 (속성 또는 변수에서 가져온) 데이터로 URL을 보간 할 수는 없지만 적어도 RGB에서 CSS 필터를 계산할 필요는 없습니다.

이모 지 유형 렌더링을 끄는 방법을 모르겠습니다. 보통 저는 font awesome 또는 glyphicons (Bootstrap 3과 함께 제공됨) 와 같은 아이콘 글꼴을 사용합니다 .

유니 코드 문자에 대해 이들을 사용하는 이점은

1. 사이트 디자인에 맞도록 다양한 스타일 중에서 선택할 수 있습니다.
2. 브라우저에서 일관됩니다 (유니 코드 별표 문자를 시도해 본 적이 있다면 IE와 다른 브라우저에서 차이가 있음을 알 수 있습니다).
3. 또한 사용하려는 유니 코드 문자처럼 완전히 스타일을 지정할 수 있습니다.

유일한 단점은 브라우저가 페이지를 볼 때 다운로드 할 수 있다는 것입니다.

OSX에서 해결책은 font-family를 EmojiSymbols

위의 솔루션 중 어느 것도 "Google 크롬 용 이모티콘"확장 프로그램에서 작동하지 않았습니다.

그래서 해결 방법으로 유니 코드 문자 'BALLOT BOX WITH CHECK'(U + 2611)의 스크린 샷을 만들고 PHP를 사용하여 이미지로 추가했습니다.

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

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