@font-face {
    font-family: '汉仪陈体甲骨文';
    src: url('../datacenter/font/HYChenTiJiaGuWen.ttf'); 
    font-weight: normal;
    font-style: normal;
  }
  
  
.jiaguwen{font-size: 36pt; font-family: "汉仪陈体甲骨文"; color:blue;}
    
        /* 统一的容器样式 */
        .diacritic-container {
            font-size: 3.6em;  /* 控制整体大小 */
            position: relative;
            display: inline-block;
            margin: 0 5px;
            vertical-align: middle;
        }
        
        .diacritic-text {
            display: block;
        }
        
        /* 下方点样式 */
        .dot-below {
            position: absolute;
            bottom: -0.6em;    /* 控制点与文字的距离（负值越大距离越远） */
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.6em;  /* 控制点的大小 */
            color: #e74c3c;    /* 控制点的颜色 */
            line-height: 1;
        }
        
        /* 上方点样式 */
        .dot-above {
            position: absolute;
            top: -0.3em;       /* 控制点与文字的距离（负值越大距离越远） */
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.6em;  /* 控制点的大小 */
            color: #3498db;    /* 控制点的颜色 */
            line-height: 1;
        }
        
        /* 上方横线样式 */
        .line-above {
            position: absolute;
            top: 0.2em;       /* 控制线与文字的距离 */
            left: 0;
            right: 0;
            height: 0.05em;     /* 控制线的粗细 */
            background-color: #2ecc71;  /* 控制线的颜色 */
            width:90%;
            align:center;
            transform: translateY(-100%);
        }
     
        
        /* 上方波浪符样式 */
        .tilde-above {
            position: absolute;
            top:  0.6em;       /* 控制波浪符与文字的距离 */
            left: 50%;
            transform: translateX(-50%) translateY(-100%);
            font-size: 0.8em;  /* 控制波浪符的大小 */
            color: red;    /* 控制波浪符的颜色 */
            font-weight: bold;
            line-height: 1;
        }
        
        /* 组合样式：上方点+下方点 */
        .dot-above-below {
            position: relative;
        }
        
         .dot-above-below::before {
            content: ".";
            position: absolute;
            top: -0.6em;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.6em;
            color: #3498db;
            line-height: 1;
        }
        
        .dot-above-below::after {
            content: ".";
            position: absolute;
            bottom:  -0.2em;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.6em;
            color: #e74c3c;
            line-height: 1;
        }
        
        
             /* 方案1：使用"--"字符作为横线 */
        .dash-above {
            position: absolute;
            top: -0.1em;       /* 控制横线与文字的距离 */
            left: 50%;
            transform: translateX(-50%) translateY(-100%);
            font-size: 0.8em;  /* 控制横线的大小 */
            color: #2ecc71;    /* 控制横线的颜色 */
            font-weight: bold;
            line-height: 1;
            white-space: nowrap;
            letter-spacing: -0.1em; /* 控制"--"字符的间距 */
        }
        
        /* 方案2：使用更长的横线字符"——" */
        .dash-above-long {
            position: absolute;
            top: -0.8em;       /* 控制横线与文字的距离 */
            left: 50%;
            transform: translateX(-50%) translateY(-100%);
            font-size: 0.8em;  /* 控制横线的大小 */
            color: #3498db;    /* 控制横线的颜色 */
            font-weight: bold;
            line-height: 1;
        }
        
        /* 方案3：使用多个"-"字符组成横线 */
        .dash-above-multi {
            position: absolute;
            top: -0.4em;       /* 控制横线与文字的距离 */
            left: 50%;
            transform: translateX(-50%) translateY(-100%);
            font-size: 0.7em;  /* 控制横线的大小 */
            color: #e74c3c;    /* 控制横线的颜色 */
            line-height: 1;
        }
        
        
       .fuhao {
            font-family: Arial, sans-serif;
            font-size: 60px;
            line-height: 1.8;
        }
        
    .unicode-code {
            fon2t-family: 'Consolas', 'Monaco', monospace,'Segoe UI';
           font-family: -apple-system, BlinkMacSystemFont, 
                 'Segoe UI Symbol', 'Segoe UI', 'Segoe UI Emoji',
                 'Apple Color Emoji', 'Noto Color Emoji',
                 'Noto Sans Symbols', 'Symbola', 'Quivira',
                 'Code2000', 'Arial Unicode MS',
                 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: 4rem;
            color2: #666;
            background-color2: #f8f9fa;
            padding: 3px 3px;
            border-radius: 4px;
            display: inline-block;
            margin-top: 5px;
        }